使用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中cookie的使用详细分析
May 28 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
常用的js方法合集
Mar 10 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php adodb介绍
2009/03/19 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
javascript调试说明
2010/06/07 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
vue.js删除列表中的一行
2018/06/30 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
科学发展观演讲稿
2014/09/11 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
海弦WR-800F
2022/04/05 无线电