angular 4 change home page url and component

Question

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 { }

Does it matter what path you run at when testing your app, or is the real concern where the app runs when it's deployed? If deployment is what matters, there's `ng build --base-href` for that. — kshetline, Mar 12 '18 at 17:35
have a look here if you want to set some kind of default route: https://stackoverflow.com/questions/37605119/angular2-router-angular-router-how-to-set-default-route — tomichel, Mar 12 '18 at 17:37
Add another path: { path: '', redirectTo: '/login', pathMatch: 'full' } — 4ndt3s, Mar 12 '18 at 17:42

score 6 · Accepted Answer · answered Mar 12 '18 at 17:38

6

Use Empty-path route configurations

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

answered Mar 12 '18 at 17:38

Vikas

11,859
7
45
69

Thank you for your help :-) – Najm Eddine ZAGA Mar 13 '18 at 08:48

score -2 · Answer 2 · answered Mar 12 '18 at 17:36

-2

Try this in to your routes

{ path: '**', redirectTo: '/login', pathMatch: 'full' }

answered Mar 12 '18 at 17:36

Aji Aneesh

121
8

angular 4 change home page url and component

2 Answers2