使用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 相关文章推荐
JavaScript中URL编码函数代码
Jan 11 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
用JavaScript实现对话框的教程
2015/06/04 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python try except finally资源回收的实现
2021/01/25 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
技能竞赛活动方案
2014/02/21 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
罚款通知怎么写
2015/04/22 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL