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 {}

Answer 1

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.