angular-cli路由器延迟加载

Question

我正在尝试运行一个示例Web应用程序来了解Angular模块的延迟加载是如何工作的.我通过使用角度2.4.1的angular-cli 1.0.0-beta.24生成了应用程序.我生成了核心应用程序,然后是3个组件.然后我在应用程序级别添加了路由,并通过将组件导入app模块直接引用前两个组件.对于第三个组件,我只是使用Angular路由文档中指定的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并未引导我找到解决方案.我在这里将我的示例应用程序添加到了我的Github帐户.

我看到Angular团队的另一位开发人员记录了这个问题,但是他们把它作为支持问题踢给了StackOverflow,因为样本在plunkr上工作. 我确信在那里有一个线索,但我对webpack并不是很了解,以及它在找到应用程序的plunkr与ng服务运行中的差异时所做的工作.

添加其他信息.应用程序的html模板看起来像这样(也可以在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种子项目,并且有一些小的预期tweek,它在那里运行良好,并且在angular-cli设置的环境中继续失败.我对TS源的唯一更改是使用相对路径:

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

用于loadChildren调用.我更改了我的Github示例代码以反映此更新,但它仍然在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的延迟加载应该工作.