尝试在webpack中使用angular-cli延迟加载特征模块时出错 [英] Error when trying to lazy load feature modules using angular-cli with webpack
问题描述
我正在尝试将angular-cli与webpack(+ productivity)结合使用来构建我的angular2应用，但是在尝试延迟加载与beta.10版本一起使用的模块时遇到了问题...
Hi I'm trying to use angular-cli with webpack (+productivity) to build my angular2 app but I'm having issues when trying to lazy load modules which were working with version beta.10...
项目结构:
package.json
package.json
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.7",
"@angular/compiler": "2.0.0-rc.7",
"@angular/core": "2.0.0-rc.7",
"@angular/forms": "^2.0.0-rc.7",
"@angular/http": "2.0.0-rc.7",
"@angular/platform-browser": "2.0.0-rc.7",
"@angular/platform-browser-dynamic": "2.0.0-rc.7",
"@angular/router": "3.0.0-rc.2",
"angular2-cookie": "1.2.3",
"core-js": "2.4.0",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "0.6.21"
},
"devDependencies": {
"@types/jasmine": "2.2.30",
"@types/protractor": "1.5.16",
"angular-cli": "^1.0.0-beta.11-webpack.9-4",
"codelyzer": "0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-coverage": "1.0.0",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.0"
}
}
angular-cli.json
angular-cli.json
{
"project": {
"version": "1.0.0-beta.11-webpack",
"name": "my-app"
},
"apps": [
{
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"index": "index.html",
"root": "src",
"mobile": false,
"scripts": [
"polyfills.ts",
"../node_modules/material-design-lite/material.min.js"
],
"styles": [
"../node_modules/material-design-icons/iconfont/material-icons.css",
"../node_modules/material-design-lite/material.css"
],
"assets": "assets",
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "config/protractor.conf.js"
}
},
"test": {
"karma": {
"config": "config/karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}
tsconfig.json
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"jasmine"
]
}
}
app.routes.ts
app.routes.ts
import {Routes, RouterModule} from "@angular/router";
import {PageNotFoundComponent} from "./404.component";
import {AuthenticationGuard} from "./base/security";
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthenticationGuard] },
{ path: 'home', loadChildren: 'app/modules/home/home.module#HomeModule' },
{ path: '**', component: PageNotFoundComponent }
];
export const routing = RouterModule.forRoot(routes, { useHash: true });
app.module.ts
app.module.ts
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {routing} from "./app.routes";
import {AppComponent} from "./app.component";
import {PageNotFoundComponent} from "./404.component";
import {CoreModule} from "./core";
@NgModule({
imports: [
BrowserModule,
routing,
CoreModule
],
declarations: [
AppComponent,
PageNotFoundComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
modules/home/home.routes.ts
modules/home/home.routes.ts
import {RouterModule} from '@angular/router';
import {HomeComponent} from './home.component';
import {AuthenticationGuard} from '../../base/security';
export const routing = RouterModule.forChild([
{ path: '', component: HomeComponent, canActivate: [AuthenticationGuard] }
]);
modules/home/home.module.ts
modules/home/home.module.ts
import {NgModule} from '@angular/core';
import {BaseModule} from '../../base/base.module';
import {routing} from './home.routes';
import {HomeComponent} from './home.component';
import {NavigationMenuComponent} from '../../base/components';
@NgModule({
imports: [
BaseModule,
routing
],
declarations: [
HomeComponent,
NavigationMenuComponent
],
exports: [],
providers: []
})
export class HomeModule {}
控制台错误消息:
我在这里忘记什么吗?我找不到任何有关如何进行此操作的文档... 预先感谢！
Is there anything I'm forgetting here? I wasn't able to find any documentation anywhere on how to proceed with this... Thanks in advance!
推荐答案
为此有一个加载器( angular2-router-loader ).但是，如果不对配置进行修改，就无法在CLI中使用它.幸运的是，es6-promise-loader可以直接使用CLI.
There's a loader for this (angular2-router-loader). However you can't use it with the CLI without hacking the config. Luckily, es6-promise-loader does work with the CLI out-of-the-box.
这是为我解决的问题:
首先，我们需要es6-promise-loader:
First we'll need the es6-promise-loader:
npm i --save-dev es6-promise-loader
然后像这样定义您的路线:
Then define your route like this:
{path:"lazy", loadChildren: () => require('es6-promise!./path/to/module')('ClassName')}
es6-promise-loader以此替换上面的内容:
the es6-promise-loader replaces the above with this:
loadChildren: () => new Promise(function (resolve) {
require.ensure([], function (require) {
resolve(require('./path/to/module')['ClassName']));
});
});
这是使用webpack加载模块的正确方法，但在每条路由中都比较麻烦.
which is the proper way to load a module with webpack, but cumbersome to put into every route.
这篇关于尝试在webpack中使用angular-cli延迟加载特征模块时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
