user2999287 user2999287 - 1 month ago 15
TypeScript Question

Angular 2 router - aux route on the root url

I want to load aux route on the / URL but it does not work. For example, I want to load in my homepage the LoginComponent.

const routes : Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path: 'login',
outlet: 'auth',
component: LoginComponent
}
];


<router-outlet></router-outlet>
<router-outlet name="auth"></router-outlet>


So now I am trying to access this URL and expecting to get the HomeComponent in the primary outlet and the LoginComponent in the auth outlet:

http://localhost:4200/(auth:login)

But it only loads the LoginComponent and not the HomeComponent.

Answer

You need to define redirect route:

const routes : Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'login',
    outlet: 'auth',
    component: LoginComponent
  }
];

<a [routerLink]="[{ outlets: { 'auth': ['login'] } }]">Sign in</a>

Or:

http://localhost/home(auth:login)