Angular 2 route with parameter acts as wildcard route

Question

I have an angular app with multiple Modules, which each define some routes.

App (base module) uses this AppRoutingModule:

const routes: Routes = [
  {path: 'user', loadChildren: 'app/user/user.module#UserModule'},
  {path: 'exchange', loadChildren: 'app/exchange/exchange.module#ExchangeModule'},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch: 'full'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

User Module Router:

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: UserComponent,
      children: [
        {path: '', component: UserProfileComponent, canActivate: [AuthGuardService]},
        {path: 'login', component: UserLoginComponent},
        {path: 'register', component: UserRegisterComponent},
        {path: 'confirm/:confirmcode', component: UserConfirmMailComponent},
        {path: 'logout', component: UserLogoutComponent}
      ]
    }]
  )],
  exports: [RouterModule]
})
export class UserRoutingModule {
}

Exchange Module Router:

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: ExchangeComponent,
      children: [
        {path: '', component: ExchangeListComponent},
        {path: ':exchange-name', component: ExchangeDetailComponent},
        {path: ':exchange-name/:baseCode', component: ExchangeSelectionComponent},
        {path: ':exchange-name/:baseCode/:targetCode', component: ExchangePairComponent},
      ]
    }]
  )],
  exports: [RouterModule]
})
export class ExchangeRoutingModule {
}

I can now use the route http://localhost:4200/exchange/Sample/Base for accessing ExchangeSelectionComponent component as expected.

But when I navigate to http://localhost:4200/user/confirm/ and accidentally missed to add the required parameter confirmcode, instead of an Invalid-Route-Error I get matched to the same ExchangeSelectionComponent-route as above. Also when I try to open http://localhost:4200/thispagedoesnotexist I get to the ExchangeDetailComponent with exchange-name = thispagedoesnotexist.

It seems that everything below /exchange/ also gets matched to the base root /.

Why is that and how can I avoid that behaviour? I thought that every route defined in a route inside routeChildren only gets lazy loaded, when the corresponding parent-route is accessed and until then is not even touched.

I use Angular 5.2. Thanks in advance for any input.

this line in your example is not complete {path: 'exchange', loadChildren:'app/exchange/exchange.module# can you please write it correctly so we would know what's there. — shehata
np, have you by any means imported exchange module in app.module ? — shehata
yes I have. I added them first as normal modules and then updated it for lazy loading. after removing the imported from AppModule that behaviour is as expected. thanks! — Jack O'neill
that's good news, yes i will write this as answer, thank you ! — shehata

shehata shehata · Accepted Answer · 2018-05-13T21:46:01

My guessing that the ExchangeModule is imported in the app.module and thus it's route definition is being resolved instead of the lazy loaded ones.

path: '', component: ExchangeComponent

Make sure that the modules are lazyloaded and not imported in app.module, this can be confirmed by quickly checking the app.module file or by checking the network tab and look for new loaded chunks when you access a route that should be lazyloaded, if a new chunk wasn't loaded then your module has been imported in app.module and wasn't lazyloaded.

Angular 2 route with parameter acts as wildcard route

1 Answers