使用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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
javascript初学者常用技巧
Sep 02 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
ES6字符串的扩展实例
Dec 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
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
python实现电子词典
2020/04/23 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python基本语法经典教程
2016/03/11 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
高二生物教学反思
2014/01/27 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
超市采购员岗位职责
2015/04/07 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android