angular 4 change home page url and component

Najm Eddine ZAGA

I have an Angular 4 application with login and registration page and then we I have this interface to manage my employees and stuff like that.

I want to launch my application on a specific page which is login page, like:

http://localhost:4200/login

How to make login page appear once Angular is started and the URL contains /login segment in it ?

here is my app.module.ts file:

import { UserService } from './user.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatInputModule,MatAutocompleteModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

// Define the routes


@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule ,
    RouterModule.forRoot([
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'users',
        component: UserComponent
      }
      {
        path: 'login',
        component: LoginComponent
      }
    ]),
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }
Vikas

Use Empty-path route configurations

Add {path: '' , redirectTo:'/login',pathMatch:'full'} to your routes.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular Routing: Url changes but always shows home page component

angular component routing to home page

How to navigate to home page change screen size in Angular 4?

Angular Home Page Component routing issue

url change but still on the same page with routing angular 4?

component url shows is the home page with any url address in the app

Angular change URL on page load

Angular Change Page through Child Component

Initializing component inside a home page in Ionic4

Angular url change does not cause the component to be recreated

Navigating to separate page/component in angular 4

how i change default url ('/') to ('home/landing/page')

Change Boolean from another component in angular 4

Angular 4: changing url, but component is not rendered

Angular redirect me to the home page when I try to acces to another page/component

Change style of header component on scroll on home page only in React.Js

Angular - Navigate to current same URL with component reload not the whole page

How to change the home page in grails?

Angular4 refresh page repeats page in url

React to url change within component with React Router 4?

Not able to load component into page - Angular 4/Ionic 3

Redirect to Home page if URL not found

change detection using Behavior Subject with subscribe in Component Angular 4

Angular4 - Change state from component not template

Angular4: Prevent rerendering component on input change

How to dynamically add change event to an external dropdownlist component in angular 4

Change view/component but not url

Change URL in component action

Angular4 reload component when URL changes