使用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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
浅析JavaScript动画
2015/06/10 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python代码xml转txt实例
2020/03/10 Python
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
分公司经理岗位职责
2013/11/11 职场文书
水毁工程实施方案
2014/04/01 职场文书
小学数学课后反思
2014/04/23 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
模范教师事迹材料
2014/12/16 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python