如何使用 loadChildren 为 Angular 2 延迟加载路由器创建 plunker答案

【问题标题】：How to create plunker for angular2 lazyloading router with loadChildren如何使用 loadChildren 为 Angular 2 延迟加载路由器创建 plunker
【发布时间】：2016-12-05 09:44:00
【问题描述】：

我在创建一个 pluker 来演示问题时遇到问题。当我使用{ path: 'mod1', loadChildren: 'mod1.module#Mod1Module'} 作为我的路线时。然后 plunker 正在尝试加载这样的 url：

https://run.plnkr.co/XXXXXXXXXX/mod1.module

但是没有找到它返回，所以我的 plunker 没有运行。

这里是 plunker 网址：https://plnkr.co/edit/Qd8MLYNQVS2NJ6vH3ZC6?p=preview

更新

我已经能够用这个 plunker 打开仪表板。 https://plnkr.co/edit/zgMigHSEFXxxwUp8QQzr?p=preview 当我尝试在模块 1 的第 1 页中导航时，它显示另一个错误。

【问题讨论】：

标签： angular

【解决方案1】：

mod1.module.ts

@NgModule({
  imports: [
    Mode1RoutingModule, // <== add this line
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    CommonModule
  ],
  declarations: [
    routedComponents,
    Mod1Page1Component,
    Mod1Page2Component
  ],
  providers: [
        Mod1AbcService
  ]
})
export class Mod1Module { }

https://plnkr.co/edit/zHso2uuvHec4FHOHGjNH?p=preview

【讨论】：

【解决方案2】：

只需在模块中加载路由，您的应用就应该像 plunker 一样工作：

@NgModule({
  imports: [
    ...
    Mode1RoutingModule
    ...
  ],
  ...
})
export class Mod1Module { }

【讨论】：

这是错误的。 Plunkr 确实使用了最新的 angular2 版本。要检查它，只需打开config.js。你会看到：paths: { 'npm:': 'https://unpkg.com/' } 和 map: {'@angular/core': 'npm:@angular/core/bundles/core.umd.js'}。只需打开此文件，您就会在标题中看到：@license Angular v2.2.4
你是对的。 plunker 正在使用最后一个版本。现在问题出现在您的路由配置中。您正在尝试加载不存在的路线...
你真的应该停下来不断更新你的答案。评论根本没有任何意义，而且你正在失去所有人:)。请在帖子末尾写下 EDIT 1、EDIT 2 等，或删除并创建另一个答案。
谢谢@Maxime。如果我需要再次更新答案，我会这样做！

【解决方案3】：

几个月前我在 Angular 路由器中发现了一个错误，我做了一个 Plunkr 来演示。（该错误现已修复！）。

无论如何，我使用 loadChildren 来延迟加载模块。它可能会帮助你：

const routes: Routes = [
  {path: 'emails', component: EmailsComponent},
  {path: 'auxiliary', outlet: 'aux', component: AuxiliaryComponent},
  {path: 'contacts', loadChildren: 'app/contacts/contacts.module#ContactsModule'},
  {path: '**', redirectTo: 'emails'}
];

完整的 Plunkr：http://plnkr.co/edit/ik9lQw971X638ZATLgHR?p=preview

编辑 1：

我查看了您的 Plunkr，我得到了它的工作：
https://plnkr.co/edit/l9oijQwwnXD0mz5FI10h?p=preview

这是我所做的：
- 将文件mod1.module.ts重命名为src/mod1.module.ts
- 将 redirectTo 从 redirectTo: '/mod1/page1' 更改为 redirectTo: '/mod1'（你没有声明路径 '/mod1/page1' 所以你不能这样做
- 使用这样的路径来延迟加载：{ path: 'mod1', loadChildren: app/mod1.module#Mod1Module'}

【讨论】：

我已经在模块 1 中引入了 Page1 组件。但它仍然无法正常工作。 plnkr.co/edit/Iegw8rQXeHxd1xfGmqGH?p=preview
Cannot match any routes. URL Segment: 'mod1/page1' 正如我之前所说，您没有任何与此 URL 匹配的路由。或者您的 Plunkr 不是最新的。
好吧，我想你误解了一些东西。您需要在 src/app.ts Routes 变量中定义路由。
那么请帮我加载模块1的第1页作为我的第一页。
更新问题会进展不大。