使用angular-cli webpack创建多个包
|
当我使用angular-cli构建项目时,它会将所有项目文件捆绑到一个主要的主包中.
我在应用程序中使用了懒惰路由,一旦应用程序加载,我就可以导航. 有没有一种方法可以将主包分为多个基于懒惰加载的路由模块的文件？ 下面是角度-cli.json中的配置 {
"project": {
"version": "1.0.0-beta.15","name": "maddy-test-project"
},"apps": [
{
"root": "src","outDir": "dist","assets": "styles/content","index": "default.htm","main": "main.ts","test": "test.ts","tsconfig": "tsconfig.json","prefix": "","mobile": false,"styles": [
"styles.less"
],"scripts": [
"styles/wfa-myriad-pro-typekit.js"
],"environments": {
"source": "environments/environment.ts","dev": "environments/environment.ts","prod": "environments/environment.prod.ts"
}
}
],"addons": [],"packages": [],"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},"test": {
"karma": {
"config": "./karma.conf.js"
}
},"defaults": {
"styleExt": "less","prefixInterfaces": false
}
}
下面是package.json {
"name": "maddy-test-project","version": "0.0.1","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","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/router": "3.0.0","d3": "^4.2.3","jquery": "^3.1.0","lodash": "^4.15.0","moment": "^2.15.0","core-js": "^2.4.1","rxjs": "5.0.0-beta.12","toastr": "^2.1.2","ts-helpers": "^1.1.1","zone.js": "^0.6.23","bootstrap-daterangepicker": "^2.1.24"
},"devDependencies": {
"@types/d3": "^3.5.35","@types/google-maps": "^3.1.27","@types/jasmine": "^2.2.30","@types/jquery": "^1.10.31","@types/lodash": "^4.14.34","@types/toastr": "^2.1.29","angular-cli": "1.0.0-beta.15","codelyzer": "~0.0.26","jasmine-core": "2.4.1","jasmine-spec-reporter": "2.5.0","karma": "1.2.0","karma-chrome-launcher": "^2.0.0","karma-cli": "^1.0.1","karma-jasmine": "^1.0.2","karma-remap-istanbul": "^0.2.1","protractor": "4.0.5","ts-node": "1.2.1","tslint": "3.13.0","typescript": "2.0.2"
}
}
提前致谢！！
它是NgModule和RouterModule.forChild()的作用.这是一个非常好的文章,用于启动大型角度2模块化应用开发：
http://blog.angular-university.io/angular2-ngmodule/
很快,为了在一个懒惰模块中移动一些逻辑和组件,您可以运行以下命令： ng g module child --routing 然后angular-cli将生成一个NgModule(app / child / child.module.ts)和一个子路由器配置(app / child / child-routing.module.ts). 延迟加载此子路由器的路由将是： { path: 'child',loadChildren: 'app/child/child.module#ChildModule' }
最后用一个约束移动你想要的ChildModule：其他模块(作为AppModule)将无法使用任何ChildModule依赖项(例如服务).如果你需要它,一个很好的做法是创建一个共享模块. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |