使用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中继承的三种方式
Oct 16 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
window.location.hash知识汇总
Nov 09 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
vue实现简单瀑布流布局
May 28 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数据加密详解
2013/06/18 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python守护线程用法实例
2017/06/23 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
单身联谊活动方案
2014/01/29 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
项目合作意向书模板
2014/07/29 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
数据设计之权限的实现
2022/08/05 MySQL