Angular multiple moduels routing

Question

I have to modules, where the secound module is lazy loaded during routing through auth. The main module app module with routing looks as following:

const app_routes: Routes = [
  { path: '', component: MainComponent, outlet: 'app', pathMatch: 'full', 
  canActivate: [OauthGuard]},
  { path: 'auth', loadChildren: 'app/authentication/authentication.module#AuthenticationModule'},
  { path: '**', component: PageNotFoundComponent, outlet: 'app' }
];

@NgModule({
  declarations: [...],
  imports: [RouterModule.forRoot(app_routes)],
  providers: [OauthGuard],
 bootstrap: [
   AppComponent
 ],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
 exports: [RouterModule]
})
export class AppModule {}

Here navigationg to auth loads the AuthenticationModule.

const auth_routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    outlet: 'app',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(auth_routes),
    UtilsModule,
    HttpModule
  ],
  declarations: [
    AuthenticationComponent,
    RegisterComponent,
    LoginComponent
  ],
  exports: [
    RouterModule
  ],
  providers: [
    ClientService,
    AuthenticationService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [
    AuthenticationComponent
  ]
})

export class AuthenticationModule {
}

According to my logic LoginComponent should be loaded on the auth router-outlet when navigation to auth/login. But instead i get this error message:

Error: Cannot match any routes. URL Segment: 'auth/login'

As suggested i logged routes registered when canActivate()gets called on first route change getting this:

Routes:  [
  {
    "path": "",
    "outlet": "app",
    "pathMatch": "full",
    "canActivate": [
      null
    ]
  },
  {
    "path": "auth",
    "loadChildren": "app/authentication/authentication.module#AuthenticationModule"
  },
  {
    "path": "**",
    "outlet": "app"
  }
]

Routes registered are the same in the ran from the àuthentication.module` constructor.

I realy have no idea why i still get this error. Any tips?

I just checked with the Angular doc team and this syntax: { path: 'auth', loadChildren: () => AuthenticationModule} does not do lazy loading. It to builds up the route tree using modules without lazy loading. — DeborahK
– DeborahK, Commented Jun 12, 2017 at 20:18
You can inspect the total of your routes registered with this small code block — Raven
– Raven, Commented Jun 12, 2017 at 20:20
Also, you could consider adding route tracing so you can better see what your routes are trying to do: ` , { enableTracing: true }` added as the second parameter to the forRoot method after the array of routes. — DeborahK
– DeborahK, Commented Jun 12, 2017 at 20:21
Also, consider not using a named outlet. Remove the outlet: 'app', This interferes with the normal routing because a named (secondary) outlet is not the same as a child outlet. — DeborahK
– DeborahK, Commented Jun 12, 2017 at 20:30
Thanks @DeborahK used the module path and class name insted, also updated the question with a previous result of routes registered before AuthenticationModule gets loaded. — SlyOtis
– SlyOtis, Commented Jun 12, 2017 at 21:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

With some help i resolved the issue, where the problem was the outlet names. I was unaware that it was possible to have multiple unnamed router-outlets as long as they belongs to different scopes. So what I did was simply to remove the outlet names. With my old code I would have to navigate to /auth(auth:login) where (auth:login) specifies the outlet name and child route to display. Without outlet names i can simply navigate to auth/login and i reach the desired page.

authentication.module

const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]}
];

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 14, 2017 at 9:39

SlyOtis

5871 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular multiple moduels routing

1 Answer 1

authentication.module

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

authentication.module

Comments

Your Answer

Sign up or log in

Post as a guest

Related