Angular2：没有延迟加载的路由器'loadChildren'相当于什么答案

【问题标题】：Angular2: What's the equivalent of the router 'loadChildren' without lazy loadingAngular2：没有延迟加载的路由器'loadChildren'相当于什么
【发布时间】：2017-01-18 15:43:27
【问题描述】：

我正在尝试将包含路由配置（从 RouterModule.forChild() 导入）的子 ngModule（功能模块）“插入”到父 ngModule。

使用延迟加载时，使用父模块路由配置中的loadChildren 键指定“插入”子模块的位置。

例如：

export const parentModuleRouteConfig = [{
    path: 'myfeaturemodule',
    loadChildren: '/app/child.module'
}];

其实我不想使用延迟加载。

如何告诉路由器“插入”（或使用）给定路径的子模块中指定的路由配置？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

使用 AOT

导出您的子路由，而不是将它们添加到您的子模块中。

export const ChildRoutes: Routes = [
    { path: '', component: ChildComponent }
];

将子模块导入父模块，直接包含路由。

const parentModuleRouteConfig: [{
    path: 'myfeaturemodule',
    // loadChildren: () => ChildModule
    children: ChildRoutes
}];

@NgModule({
    imports: [
        ChildModule
    ]
})
export class ParentModule { }

没有 AOT

您仍然可以使用 loadChildren 同步加载。有一些例子in this github issue。

import { ChildModule } from '/app/child.module';

export const parentModuleRouteConfig = [{
    path: 'myfeaturemodule',
    loadChildren: () => ChildModule
}];

【讨论】：

这还能用吗？我收到ERROR in Cannot read property 'loadChildren' of undefined
这不适用于 Angular AOT（角度 CLI 生产构建），但它仍然适用于 Angular 7.2.5 的 webpack 开发。这似乎与 github.com/angular/angular/issues/22700 匹配。

【解决方案2】：

你可以定义一个预加载策略，告诉 Angular 预加载所有模块：

import { ...., PreloadAllModules } from '@angular/router'

@NgModule({
  ....
  imports: [
         RouterModule.forRoot(arrayOfYourRoutes, { preloadingStrategy: PreloadAllModules })
  ]

如果您只想预加载某些模块，您还可以定义自定义策略。要获得执行此操作的好方法，请查看：example in angular doc

在您发表评论后进行编辑，以自我描述您的模块，您可以执行以下操作：

@NgModule(
   imports: [RouterModule.forChild(routesOfFeatureModule)], //use forChild instead of forRoot
   exports: [RouterModule]
)
export class MyFeatureRoutingModule{} //define routing in a separate module of your feature, everything related to routing go there. This way, you doen't polute your main FeatureModule file. Re-export RouterModule to be able to use router directives in your FeatureModule just by importing MyFeatureRoutingModule


@NgModule(
   ...
   imports: [MyFeatureRoutingModule] //import routing of your feature module
)
export class MyFeatureModule{}



@NgModule(
   ...
   imports: [MyFeatureModule] // import your feature module
)
export class AppModule{}

【讨论】：

谢谢，我不知道预加载策略。但是这个特性显然允许我们改进延迟加载策略，问题是在这一点上，我根本不想使用延迟加载。我只想让我的功能模块“自我描述”（包括它的路由器配置）并由父模块在引导时加载。
好吧，你为什么不能使用标准的加载功能模块的方式，通过在你的应用模块中导入它呢？ @NgModule(...., imports: [MyFeatureModule]) export class AppModule{}
这正是我正在做的。但我的功能模块包含它自己的专用路由器配置。 @NgModule 将从功能模块加载所有导出的组件和指令，但是它如何在不知道在路由器路径层次结构中“插入”它们的位置的情况下加载功能模块路由配置？这就是这个问题的重点！
这是我尝试过的，但它不起作用......但它怎么能起作用？？？路由器如何知道将 routesOfFeatureModule 中定义的所有路由“挂载”到哪里？ “位置”是指路由器路径层次结构中的位置