使用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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
web打印小结
Jan 11 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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连接mssql:pdo odbc sql server
2011/07/20 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php自定义错误处理用法实例
2015/03/20 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
使用js 设置url参数
2013/07/08 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
上海期货面试题
2014/01/31 面试题
教导处工作制度
2014/01/18 职场文书
同学聚会策划方案
2014/06/06 职场文书
建筑工地质量标语
2014/06/12 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
寻找成龙观后感
2015/06/12 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL