Routing breaks when lazy loading another module

Question

I have a lazy loaded module AccountModule which gets loaded after accessing https://localhost:4201/account.

app.routing.ts

const routes: Routes = [

  {
    path: '',
    loadChildren: () => import('./ui/pages/start/start.module')
      .then(m => m.StartModule)
  },


  {
    path: 'account',
    loadChildren: () => import('./ui/pages/account/account.module')
      .then(m => m.AccountModule)
  },

];

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

AccountModule has two child routes. One of which gets loaded eagerly (/overview) whereas the other gets loaded lazily (/albums).

Hence, acount.routing.ts looks like this:

const routes: Routes = [

  {path: '', redirectTo: 'overview', pathMatch: 'full'},

  {
    path: 'overview',
    component: AccountComponent,
  },

  {
    path: 'albums',
    loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
    // component: AlbumsComponent  // This works!
  },

];

export const AccountRouting = RouterModule.forChild(routes);

Now, if I use "eager" loading (component:AlbumsComponent) everything is working. But, if I switch to loadChildren: () => ... routing does not work anymore. This routerLink

<app-raised-button [routerLink]="['/account/albums']">
  My Albums
</app-raised-button>

Results in https://localhost:4201/account/albums (working) or https://localhost:4201/account/albums/overview (not working). But why? And how can I fix this issue?

Why does it behave differently just because of the way the module/component gets loaded?

If I am setting the path to ./albums:

{
  path: './albums',
  loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
},

I am just getting

Error: Cannot match any routes. URL Segment: 'account/albums'

What happens if you try: loadChildren: './albums/albums.module#AlbumsModule' ? — Lia
– Lia, Commented Jan 19, 2020 at 11:59

Sats · Accepted Answer · 2020-01-19 11:58:33Z

2

I guess you have not provided a Routes for albums.routing.module ?

Since you have directed the albums.module, but you might have not provided from there what component you have been show.

If you have not created to albums.routing.module, create one and provide a default route in the same module.

const routes: Routes = [

  {path: '', component:AlbumsComponent } ];

answered Jan 19, 2020 at 11:58

Sats

1,9711 gold badge16 silver badges21 bronze badges

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

2 Comments

Stefan Falk Over a year ago

+facepalm+ .. yes, this was indeed the problem. I forgot to provide routes for the module.. Thanks for helping!

Sats Over a year ago

glad to help you.. :)

STEVE K. · Accepted Answer · 2020-01-19 19:55:51Z

0

Make sure in your albums module , you have your have imported your routes as shown : RouterModule.forChild(albumsRoutes)

edited Jan 19, 2020 at 19:55

answered Jan 19, 2020 at 11:47

STEVE K.

96913 silver badges16 bronze badges

2 Comments

Stefan Falk Over a year ago

Nope, still getting account/albums/overview - no idea why this happens ..

STEVE K. Over a year ago

Make sure in your albums module , you have your have imported your route as RouterModule.forChild(albumsRoutes)

Collectives™ on Stack Overflow

Routing breaks when lazy loading another module

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related