使用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 相关文章推荐
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
document.getElementById介绍
2011/09/13 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python实现随机密码字典生成器示例
2014/04/09 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Django之路由层的实现
2019/09/09 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
2014年清明节寄语
2014/04/03 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年机关党委工作总结
2015/05/23 职场文书