Question

我正在尝试在我的示例angular2应用程序中实现延迟加载功能模块。

我的应用程序有一个根模块和两个功能模块。

Root模块和路由文件的路径是

app/public/scripts/app.module.ts
app/public/scripts/app.routing.ts

要实现延迟加载的功能模块及其路由的路径是

app/public/scripts/modules/user/app.user.module.ts
app/public/scripts/modules/user/app.user.routing.ts

以下是app.routing.ts代码

'use strict';

import {Routes , RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

const appRoutes : Routes = [
{path: 'ausers' , loadChildren: 'scripts/modules/user/app.users.module#UsersModule' }
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

以下是app.user.routing.ts代码

'use strict';

import { ModuleWithProviders } from '@angular/core';
import { Routes , RouterModule } from '@angular/router';

//-- import components , directives and pipes
import { AppUsersComponent } from './app.users.component';


const UserRoutes :Routes = [
{path: 'ausers/showusers' , component: AppUsersComponent }
]

export const userRouting: ModuleWithProviers =  RouterModule.forChild(UserRoutes);

当用户点击应用程序中的链接

时

routerLink =“ausers / showusers”

显示以下错误

无法解析SourceMap：http://localhost:3000/scripts/BehaviorSubject.js.map Angular 2正在开发模式下运行。调用＆gt; enableProdMode（）以启用生产模式。 EXCEPTION：未捕获（在承诺中）：错误：SyntaxError：意外＆gt;标记＆lt; 评估http://localhost:3000/scripts/modules/user/app.users.module 加载http://localhost:3000/scripts/modules/user/app.users.module
时出错

我使用webpack进行模块加载和捆绑知道这个错误的原因是什么？

Answer 1

您需要指定模块相对于src/的路径：

{path: 'ausers' , loadChildren: 'app/public/scripts/modules/user/app.users.module#UsersModule' }

对于RC6上的webpack，懒惰加载也是错误的，已在#11837和RC7中修复。

无法在Angular2（RC-6）中加载延迟模块

1 个答案: