延迟加载模块 Angular 11答案

【问题标题】：lazy loading modules angular 11延迟加载模块 Angular 11
【发布时间】：2021-03-25 14:30:51
【问题描述】：

我有一个 app-routing.module.ts 之类的

const routes: Routes = [
  {
    path: 'login', 
    component: LoginComponent
  },
  {
     path: '', 
     canActivate: [AuthGuard], 
     component: HomeComponent, 
     children: [ 
       //todo w AuthGuard trzeba sprawdzic, czy dane logowania poprawne
      {
         path: 'nationalOneWayTicket', 
         loadChildren: () => import('./national-one-way-ticket/national-one-way-ticket.module').then(m => m.NationalOneWayTicketModule)}
    ]},
  {path: '**', component: PageNotFoundComponent}
];

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

在我的 app.component.ts 中我也有这条路线：

ngOnInit() {
    this.initRoutes();
    this.router.navigate([this.urls.login]);
  }

  private initRoutes(): void {
    const routerConfig = [
      {path: 'login', component: LoginComponent},
      {path: '', canActivate: [AuthGuard], component: HomeComponent, children: [
        {path: 'nationalOneWayTicket', loadChildren: () => import('./national-one-way-ticket/national-one-way-ticket.module').then(m => m.NationalOneWayTicketModule)}
  ]},
      {path: '**', component: PageNotFoundComponent}// todo tutaj dodawać kolejne ścieżki
    ];
    this.router.resetConfig(routerConfig);

我的 HomeComponent 非常简单，它只是 html：

<app-header></app-header>
<br>
<br>
<br>
<router-outlet></router-outlet>

登录操作后我得到了

 this.router.navigate([this.url.nationalOneWayTicket]);

我可以看到标题，但看不到nationalOneWayTicketModule 的html。不知道我做错了什么

【问题讨论】：

控制台有错误吗？
不，没什么。同样在网络中我可以看到localhost:4200/… 所以似乎模块已加载，只是 ts 和 html 没有？

标签： angular typescript routes

【解决方案1】：

没关系现在可以了。我只需要创建一个 NAtional..RoutingModule 来定义应用程序的这一部分的特定路由，现在我可以看到这个组件的 html :)

【讨论】：