使用angular-cli webpack创建多个包的方法


Posted in Javascript onOctober 16, 2018

当我使用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/

The first thing that we need to do is to remove every mention of the Home component or the HomeModule from the App component and the main routing configuration:
We can see here that the App component no longer imports HomeModule, instead the routing config uses loadChildren to say that if /home or any other url starting with it gets hit, then the file home.module should be loaded via an Ajax call.

很快,为了在一个懒惰模块中移动一些逻辑和组件,您可以运行以下命令:

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依赖项(例如服务).如果你需要它,一个很好的做法是创建一个共享模块.

http://stackoverflow.com/questions/39619003/creating-multiple-bundles-using-angular-cli-webpack

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
JS delegate与live浅析
Dec 21 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 #Javascript
Postman的下载及安装教程详解
Oct 16 #Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 #Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 #Javascript
iView框架问题整理小结
Oct 16 #Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python中的错误如何查看
2020/07/08 Python
聊聊python中的异常嵌套
2020/09/01 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
StringBuilder和String的区别
2015/05/18 面试题
会计自我鉴定范文
2013/10/06 职场文书
自我评价个人范文
2013/12/16 职场文书
全国道德模范事迹
2014/02/01 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
社团个人总结范文
2015/03/05 职场文书
小学入学感言
2015/08/01 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书