使用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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 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 更新数据库中断的解决方法
2009/06/05 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python类参数self使用示例
2014/02/17 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python语言中with as的用法使用详解
2018/02/23 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python画双y轴图像的示例代码
2019/07/07 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
总结表彰大会主持词
2014/03/26 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
党员剖析材料范文
2014/09/30 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
人才市场接收函
2015/01/30 职场文书
团员年度个人总结
2015/02/26 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
python库sklearn常用操作
2021/08/23 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL