angular-cli路由器延迟加载
我正在尝试运行一个示例Web应用程序来了解Angular模块的延迟加载是如何工作的.我通过使用角度2.4.1的angular-cli 1.0.0-beta.24生成了应用程序.我生成了核心应用程序,然后是3个组件.然后我在应用程序级别添加了路由,并通过将组件导入app模块直接引用前两个组件.对于第三个组件,我只是使用
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并未引导我找到解决方案. 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服务运行中的差异所做的. 添加其他信息.该应用程序的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,并且有一些小的预期tweek,它在那里运行良好,并且在angular-cli设置的环境中继续失败.我对TS源的唯一更改是使用相对路径: { path: 'comp3',loadChildren: './comp3/comp3.module#Comp3Module'} 用于loadChildren调用.我更改了我的Github示例代码以反映此更新,但它仍然在angular-cli环境下失败. 解决方法
更改你的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的延迟加载应该工作. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |