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

【问题标题】：Angular 12 Routing doesn't work when lazy loading modules延迟加载模块时Angular 12路由不起作用
【发布时间】：2021-09-18 05:53:28
【问题描述】：

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

【问题讨论】：

首先尝试在您的 app.component.html 中使用
致雇主

用于子页面吗？模块登录工作正常吗？