尝试使用带有webpack的angular-cli延迟加载功能模块时出错

前端之家收集整理的这篇文章主要介绍了尝试使用带有webpack的angular-cli延迟加载功能模块时出错前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我正在尝试使用angular-cli与webpack(生产力)来构建我的angular2应用程序,但是在尝试使用版本beta.10的懒惰加载模块时我遇到了问题…

项目结构:

的package.json

  1. {
  2. "name": "my-app","version": "0.0.0","license": "MIT","angular-cli": {},"scripts": {
  3. "start": "ng serve","lint": "tslint \"src/**/*.ts\"","test": "ng test","pree2e": "webdriver-manager update","e2e": "protractor"
  4. },"private": true,"dependencies": {
  5. "@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"
  6. },"devDependencies": {
  7. "@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"
  8. }
  9. }

角cli.json

  1. {
  2. "project": {
  3. "version": "1.0.0-beta.11-webpack","name": "my-app"
  4. },"apps": [
  5. {
  6. "main": "main.ts","test": "test.ts","tsconfig": "tsconfig.json","prefix": "app","index": "index.html","root": "src","mobile": false,"scripts": [
  7. "polyfills.ts","../node_modules/material-design-lite/material.min.js"
  8. ],"styles": [
  9. "../node_modules/material-design-icons/iconfont/material-icons.css","../node_modules/material-design-lite/material.css"
  10. ],"assets": "assets","environments": {
  11. "source": "environments/environment.ts","dev": "environments/environment.ts","prod": "environments/environment.prod.ts"
  12. }
  13. }
  14. ],"addons": [],"packages": [],"e2e": {
  15. "protractor": {
  16. "config": "config/protractor.conf.js"
  17. }
  18. },"test": {
  19. "karma": {
  20. "config": "config/karma.conf.js"
  21. }
  22. },"defaults": {
  23. "styleExt": "scss","prefixInterfaces": false
  24. }
  25. }

tsconfig.json

  1. {
  2. "compilerOptions": {
  3. "declaration": false,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [
  4. "es6","dom"
  5. ],"mapRoot": "./","module": "es6","moduleResolution": "node","outDir": "../dist/out-tsc","sourceMap": true,"target": "es5","typeRoots": [
  6. "../node_modules/@types"
  7. ],"types": [
  8. "jasmine"
  9. ]
  10. }
  11. }

app.routes.ts

  1. import {Routes,RouterModule} from "@angular/router";
  2. import {PageNotFoundComponent} from "./404.component";
  3. import {AuthenticationGuard} from "./base/security";
  4.  
  5. const routes: Routes = [
  6. { path: '',redirectTo: 'home',pathMatch: 'full',canActivate: [AuthenticationGuard] },{ path: 'home',loadChildren: 'app/modules/home/home.module#HomeModule' },{ path: '**',component: PageNotFoundComponent }
  7. ];
  8.  
  9. export const routing = RouterModule.forRoot(routes,{ useHash: true });

app.module.ts

  1. import {NgModule} from "@angular/core";
  2. import {BrowserModule} from "@angular/platform-browser";
  3. import {routing} from "./app.routes";
  4. import {AppComponent} from "./app.component";
  5. import {PageNotFoundComponent} from "./404.component";
  6. import {CoreModule} from "./core";
  7.  
  8. @NgModule({
  9. imports: [
  10. BrowserModule,routing,CoreModule
  11. ],declarations: [
  12. AppComponent,PageNotFoundComponent
  13. ],bootstrap: [AppComponent]
  14. })
  15. export class AppModule {}

模块/家用/ home.routes.ts

  1. import {RouterModule} from '@angular/router';
  2. import {HomeComponent} from './home.component';
  3.  
  4. import {AuthenticationGuard} from '../../base/security';
  5.  
  6. export const routing = RouterModule.forChild([
  7. { path: '',component: HomeComponent,canActivate: [AuthenticationGuard] }
  8. ]);

模块/家用/ home.module.ts

  1. import {NgModule} from '@angular/core';
  2. import {BaseModule} from '../../base/base.module';
  3. import {routing} from './home.routes';
  4. import {HomeComponent} from './home.component';
  5. import {NavigationMenuComponent} from '../../base/components';
  6.  
  7. @NgModule({
  8. imports: [
  9. BaseModule,routing
  10. ],declarations: [
  11. HomeComponent,NavigationMenuComponent
  12. ],exports: [],providers: []
  13. })
  14. export class HomeModule {}

控制台错误消息:

有什么我忘了吗?我无法在任何地方找到任何关于如何继续这样做的文件……
提前致谢!

这是一个装载机( angular2-router-loader).但是,如果不破解配置,则无法在CLI中使用它.幸运的是,es6-promise-loader可以与开箱即用的CLI一起使用.

这对我有用:

首先我们需要es6-promise-loader:

npm i –save-dev es6-promise-loader

然后像这样定义你的路线:

{path:“lazy”,loadChildren :()=>需要( ‘ES6-承诺!./路径/到/模块’)( ‘类名’)}

es6-promise-loader用以下内容替换上面的内容

  1. loadChildren: () => new Promise(function (resolve) {
  2. require.ensure([],function (require) {
  3. resolve(require('./path/to/module')['ClassName']));
  4. });
  5. });

这是使用webpack加载模块的正确方法,但是放入每个路径都很麻烦.

猜你在找的Angularjs相关文章