使用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对select控件option选项的增删改查示例代码
Oct 21 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
原生js二级联动效果
Jun 20 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 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
Zerg兵种介绍
2020/03/14 星际争霸
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php判断当前操作系统类型
2015/10/28 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
JS实现小星星特效
2019/12/24 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python之os操作方法(详解)
2017/06/15 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python for循环中的陷阱详解
2018/07/13 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python中re模块知识点总结
2021/01/17 Python
请介绍一下WSDL的文档结构
2013/03/17 面试题
质检部岗位职责
2013/11/11 职场文书
《大海那边》教学反思
2014/04/09 职场文书
低碳环保演讲稿
2014/08/28 职场文书
物流管理专业推荐信
2014/09/06 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
简历中自我评价范文
2015/03/11 职场文书
逃课检讨书范文
2015/05/06 职场文书
感恩父母主题班会
2015/08/12 职场文书