使用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 textarea自动增高并隐藏滚动条
Dec 16 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
nodejs教程之入门
2014/11/21 NodeJs
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python中requests库session对象的妙用详解
2017/10/30 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
python中四舍五入的正确打开方式
2021/01/18 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
新闻专业学生的自我评价
2014/02/13 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
2014年团队工作总结
2014/11/24 职场文书
答谢词范文
2015/01/05 职场文书
小学生表扬稿范文
2015/05/05 职场文书
管理失职检讨书范文
2015/05/05 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫