从lazyLoading到"正常"加载的角度切换

Question

我正在开发一个实现了延迟加载的Angular应用程序.我试着尝试延迟加载,但我决定不想在我的应用程序中实现它.这是我的app.module.ts:

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'hq', loadChildren: 'app/hq/hq.module#HqModule' },
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ]),
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }

如何切换路线,例如hq恢复正常加载？我期望以下内容可行:

  { path: 'hq', redirectTo: HqModule }

然而,这会返回我的模块是一种错误的参数类型.这在Angular中甚至可能吗？

hq.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
        { path: '',
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            { path: '', pathMatch: 'full', redirectTo: 'overview' },
            { path: 'overview', component: OverviewComponent, canActivate: [AuthGuard] },
          ]
        },
    ]),
  ],
  declarations: [HqTemplateComponent, OverviewComponent]
})

Answer 1

箭头功能

我喜欢通过将字符串更改为箭头函数来执行此操作,如下所示:

import { HqModule } from './hq/hq.module';


{ path: 'hq', loadChildren: () => HqModule },

对于角4和更小的角度:

export function loadHqModuleFn() {
  return HqModule;
}

{ path: 'hq', loadChildren: loadHqModuleFn },

注意: 从版本5开始,编译器会在发出.js文件时自动执行此重写.感谢"表达降低"

Plunker示例

角路由器装载机？同步=真

如果你使用angular-router-loader,那么你应该知道这个加载有特殊的语法来同步加载模块.只需将sync=true查询字符串值添加到您的loadChildren string:

{ path: 'hq', loadChildren: 'app/hq/hq.module#HqModule?sync=true' },

进口

当然,您只需将模块添加到imports阵列,但在这种情况下,您必须更改此模块的路由器配置路径:

app.module.ts

@NgModule({
  imports: [
    ...,       
    HqModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ])
  ]
  ...
})
export class AppModule {}

hq.module.ts

@NgModule({
  imports: [
    ...
    RouterModule.forChild([
        { path: 'hq', <========================== changed '' to `hq`
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            ...
          ]
        },
    ]),
  ],
  ...
})

值得一提的是,角度路由器配置对订单是严格的.根据文件:

路由器在匹配路由时使用第一匹配胜利策略,因此应将更具体的路由放置在不太具体的路由之上

因此,将路径定义的模块添加到imports数组中的顺序与执行顺序相同RouterModule.forRoot.