Angular 12 Routing doesn't work when lazy loading modules

Question

I am having a very weird issue with routing and lazy loaded modules. I have read multiple different articles and guides on lazy loading and routing but have not been able to solve this. In short, I am lazy loading a few modules, however when I try to use the router navigate() method, I can see the address bar update with the correct url, but the page itself doesn't navigate. If I then refresh the page, with the the updated address bar, I get to the page I was suppose to originally navigate to. I've confirmed that the lazy loading aspect is working as expected as I see the chunks load when I hit the appropriate route. I've also verified that if instead of using lazy loading I load the appropriate component up front the routing works without any issues.

app.module

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [
    LoginService,
    LocalStorageService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app-routing

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () =>
      import('./login/login.module').then((c) => c.LoginModule),
  },
  {
    path: 'employer',
    canActivate: [UserGuard],
    loadChildren: () =>
      import('./employer/employer.module').then((c) => c.EmployerModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

employer-module

@NgModule({
  declarations: [EmployerComponent, EmployersComponent],
  imports: [CommonModule, SharedModule, EmployerRoutingModule],
})
export class EmployerModule {}

employer.routing

const routes: Routes = [
  {
    path: '',
    component: EmployersComponent,
  },
  {
    path: 'detail/:id',
    component: EmployerComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class EmployerRoutingModule {}

First try with <li><a routerLink="/employer">To employer</a></li> in your app.component.html. Do you have a second <router-outlet> for the children pages?. Module login works fine? — Juan Vicente Berzosa Tejero
– Juan Vicente Berzosa Tejero, Commented Sep 18, 2021 at 6:17
But I have another application that uses a similar architecture that only has one router outlet as well. — Maxi Pereyra
– Maxi Pereyra, Commented Sep 18, 2021 at 14:22

Maxi Pereyra · Accepted Answer · 2021-09-18 20:11:53Z

4

I finally found my issue that was messing up my routing. Inside of my shared.module I was calling AppRoutingModule, which was somehow duplicating all routes and breaking everything. Routing is now working as expected.

answered Sep 18, 2021 at 20:11

Maxi Pereyra

1232 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Angular 12 Routing doesn't work when lazy loading modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related