使用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 继承实例分析
Nov 04 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
Vue中props的使用详解
Jun 15 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue全局使用axios的操作
Sep 08 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
vue实现分页栏效果
2019/06/28 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
一份软件工程师的面试试题
2016/02/01 面试题
2013的个人自我评价
2013/12/26 职场文书
学生自我评语大全
2014/04/18 职场文书
淘宝店策划方案
2014/06/07 职场文书
企业环保标语
2014/06/10 职场文书
出售房屋委托书范本
2014/09/24 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
先进个人材料怎么写
2014/12/30 职场文书
十岁生日答谢词
2015/01/05 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android