尝试在webpack中使用angular

本文介绍了尝试在webpack中使用angular-cli延迟加载特征模块时出错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将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 "./404ponent"; 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 "./appponent"; import {PageNotFoundComponent} from "./404ponent"; 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 './homeponent'; 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 './homeponent'; 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.