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

Question

我在路由和延迟加载模块方面遇到了一个非常奇怪的问题。我已经阅读了多篇关于延迟加载和路由的不同文章和指南，但未能解决这个问题。简而言之，我懒加载了一些模块，但是当我尝试使用路由器 navigate() 方法时，我可以看到地址栏更新为正确的 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 {}

Answer 1

我终于找到了我的路由问题。在我的 shared.module 中，我正在调用 AppRoutingModule，它以某种方式复制了所有路由并破坏了所有内容。路由现在按预期工作。

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

Angular 12 Routing doesn't work when lazy loading modules

routes

lazy-loading

angular

angular12