Angular 从延迟加载切换到 'normal' 加载

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 }

不过 returns 我的模块是错误的参数类型。这在 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

将 HqModule 添加到您的 AppModule 的导入数组，并从 AppModule 路由定义中删除 HqModule 条目。像这样：

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

Answer 2

箭头函数

我喜欢通过将字符串更改为类似以下内容的箭头函数来实现：

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


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

对于 aot angular 4 及以下:

export function loadHqModuleFn() {
  return HqModule;
}

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

注意： 从版本 5 开始，编译器会在发出 .js 文件时自动执行此重写。感谢"expression lowering"

Plunker Example

angular-router-loader?sync=true

如果你使用angular-router-loader then you should be aware that this loaded has special syntax for to load module synchronously。只需将 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: [
            ...
          ]
        },
    ]),
  ],
  ...
})

还值得一提的是，angular 路由器配置对顺序非常严格。根据 the docs：

The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes

因此，按照与在 RouterModule.forRoot.

中相同的顺序将具有路由定义的模块添加到 imports 数组

Angular 从延迟加载切换到 'normal' 加载

Angular switch from lazyLoading to 'normal' loading

angular-module

angular

箭头函数

angular-router-loader?sync=true

进口