angular-cli 路由器延迟加载

Question

我正在尝试运行一个示例 Web 应用程序来了解 Angular 模块的延迟加载是如何工作的。我通过使用 angular 2.4.1 的 angular-cli 1.0.0-beta.24 生成了应用程序。我生成了核心应用程序，然后生成了 3 个组件。然后，我在应用程序级别添加了路由，并通过将组件导入应用程序模块来直接引用前两个组件。对于第三个组件，我只是使用 Angular routing docs 中指定的 loadChildren 方法添加了路由。 .我对主应用程序的路由配置如下:

const appRoutes: Routes  = [
    { path: 'comp1', component: Comp1Component},
    { path: 'comp2', component: Comp2Component},
    { path: 'comp3', loadChildren: 'app/comp3/comp3.module'}
];

export default RouterModule.forRoot(appRoutes);

我将第三个组件的代码变成了一个模块，并删除了从应用程序到第三个组件的所有导入。该模块的路由配置如下:

const routes: Routes = [
    {path: '', component:Comp3Component}
];

export default RouterModule.forChild(routes);

当我运行应用程序时，Comp1 和 Comp2 的路由工作正常，当我单击 Comp3 的链接(模块路由)时，我在控制台中记录了以下错误:

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'.
Error: Cannot find module './comp3/comp3.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular]

似乎 webpack 没有处理延迟加载。我已经尝试了“loadChildren”调用的各种路径变体，包括:

loadChildren: 'app/comp3/comp3.module#Comp3Module'

行为没有变化(仍然得到上面的错误)。 angular2 的新手，所以我的代码中可能有一些东西，但我看到其他人也遇到了同样的错误。我的 google/stackoverflow foo 没有引导我找到解决方案。我添加了我的 sample app to my Github account here .

I saw this issue logged by another developer with the Angular team but they kicked it as a support issue to StackOverflow because the sample worked on plunkr.我敢肯定其中某处有线索，但我对 webpack 以及它在查找应用程序的 plunkr 与 ng serve 运行差异方面的作用知之甚少。

添加附加信息。该应用程序的 html 模板如下所示 (also available on github repo) :

 <h1>
    {{title}}
 </h1>
 <ul>
    <li><a class="nav-link" routerLink="/comp1" routerLinkActive="active">Component 1</a></li>
    <li><a class="nav-link" routerLink="/comp2" routerLinkActive="active">Component 2</a></li>
    <li><a class="nav-link" routerLink="/comp3" routerLinkActive="active">Component 3</a></li>
  </ul>
  <p></p>
  <router-outlet></router-outlet>

我将此应用程序的源代码树(从 src/app 向下)复制到 angular2 seed project ，并且有一些小的预期 tweeks，它在那里运行良好，并在 angular-cli 设置的环境中继续失败。我对 TS 源所做的唯一更改是使用相对路径:

{ path: 'comp3', loadChildren: './comp3/comp3.module#Comp3Module'}

用于 loadChildren 调用。我更改了我的 Github 示例代码以反射(reflect)此更新，但它在 angular-cli 环境下仍然失败。

Answer 1

更改您的 comp3.routes.ts:

export default RouterModule.forChild(routes);

收件人:

export const comp3Routing = RouterModule.forChild(routes);

在你的 comp3.module.ts 上替换:

import comp3Routes from "./comp3.routes";

收件人:

import { comp3Routing } from "./comp3.routes";

最后导入 comp3Routing，所以它应该是这样的:

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        comp3Routing,
    ],
    declarations: [
        Comp3Component
    ],
    exports: [
        Comp3Component
    ],

    providers: [],
})
export class Comp3Module { }

你的 comp3 延迟加载应该可以工作。