延迟加载模块时Angular 12 Routing不起作用

我在路由和延迟加载模块方面遇到了一个非常奇怪的问题。我已经阅读了多篇关于延迟加载和路由的不同文章和指南,但都无法解决这个问题。简而言之,我很懒地加载了一些模块,但当我尝试使用router-navigation()方法时,我可以看到地址栏更新为正确的url,但页面本身无法导航。然后,若我用更新后的地址栏刷新页面,我就会到达我最初应该导航到的页面。我已经确认,当我看到块在到达适当的路径时加载时,延迟加载方面正在按预期工作。我还验证了,如果我不使用延迟加载,而是提前加载适当的组件,那么路由就可以正常工作,不会出现任何问题。

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

应用程序路由

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

雇主模块

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