大佬教程收集整理的这篇文章主要介绍了尝试使用带有webpack的angular-cli延迟加载功能模块时出错,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
项目结构:
的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" } }
角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
{ "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
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
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 {}
模块/家用/ 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] } ]);
模块/家用/ 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 {}
控制台错误消息:
这对我有用:
首先我们需要es6-promise-loader:
npm i –save-dev es6-promise-loader
然后像这样定义你的路线:
{path:“lazy”,loadChildren :()=>需要( ‘ES6-承诺!./路径/到/模块’)( ‘类名’)}
es6-promise-loader用以下内容替换上面的内容:
loadChildren: () => new Promise(function (resolvE) { require.ensure([],function (requirE) { resolve(require('./path/to/module')['ClassName'])); }); });
这是使用webpack加载模块的正确方法,但是放入每个路径都很麻烦.
以上是大佬教程为你收集整理的尝试使用带有webpack的angular-cli延迟加载功能模块时出错全部内容,希望文章能够帮你解决尝试使用带有webpack的angular-cli延迟加载功能模块时出错所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。