解决:Angular-cli:执行ng-build --prod后,dist文件里无js文件、文件未压缩等问题
Angular2.0于2016年9月上线,我于9月入坑。
入坑以来,一直让我很困惑的问题
1、angular-cli是个什么鬼东西?
2、为什么我们自己的资源文件还没写什么,就有起码50多个js文件加载出来,页面启动速度蜗牛级别
3、ng build打包出来的文件,未压缩
4、ng build --prod打包出来的文件,未压缩,而且缺少js文件
5、部署后,如何替换客户端缓存文件,也就是文件版本如何更换
6、文件配置文件在哪里?
诸如此类问题,需要以下条件:
angular-cli :Beta.14版本 (ng --version)
node :Beta.4 or higher
npm: Beta.3 or higher
具体方法参见angular-cli在github上的原文:https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14;
我这里只介绍根据原文我所做的具体操作:
1、卸载掉旧版cli,下载最新版
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest 2、使用新版cli,new一个新项目出来
ng new migration-project
cd migration-project
3、将新项目中的src目录备份
mv src/ src.webpacktemplate/ 4、将原项目中的src,移入新项目中
mv ${OLD_PATH}/src src 5、将原项目中的e2e目录,移入新项目中
mv ${OLD_PATH}/e2e e2e
6、删掉新项目中不需要的文件
rm src/system-config.ts
rm src/typings.d.ts 7、将备份的src中这些文件拷贝出来
cp src.webpacktemplate/polyfills.ts src/
cp src.webpacktemplate/styles.css src/
cp src.webpacktemplate/test.ts src/
cp src.webpacktemplate/tsconfig.json src/
cp src.webpacktemplate/typings.d.ts src/
8、将备份中的src.webpacktemplate/main.ts文件,拷贝到新项目中,注意和你原项目中的main.ts做对比,保留你的代码
9、如上操作src.webpacktemplate/index.html文件
10、将旧目录的环境配置文件拷入,注意文件名
mv ${OLD_PATH}/config/environment.dev.ts src/environments/environment.ts
mv ${OLD_PATH}/config/environment.prod.ts src/environments/environment.prod.ts 此处原文标注:
If you have any custom environments don't forget to move them too.
Environments are now listed in the angular-cli.json. Make sure those files matches the files on your disk. More importantly, because they're part of your application, their paths are relative to your main.ts
.
11、npm install --save ${LIBRARY}
12、删除掉所有的 moduleId: module.id,在webpack中,module.id 是number,但是在angular中期望是一个string 13、把你所有的静态资源文件,图片放入新项目中的src/assets目录,别忘了改代码里的引用路径
cp -R ${OLD_PATH}/public/ src/assets/ 14、
Finally, if you're using SASS or LESS, you need to rename yourstyleUrls
in all your files. Webpack understands LESS and SASS so you can usestyleUrls: ['my-component.scss']
in your component and it will be transcompiled automatically.
15、可以入坑了,ng serve运行一下,改掉所有出错的地方,如果没有出错,就可以删掉src.webpacktemplate/目录了
16、删掉新项目的.git配置,把原项目中的.git文件复制过来
rm -rf .git/
cp -R ${OLD_PATH}/.git .
17、ng serve起项目,ng build --prod打包也成功了! 打包出来的东西少很多了!!研究得出,它的配置文件是这个:
解决:Angular-cli:执行ng-build --prod后,dist文件里无js文件、文件未压缩等问题的更多相关文章
- 执行ng build --prod --aot命令报错
D:\git\**\src\main\iui>ng build --prod --aotHash: 257ab60feca43633b6f7Time: 25358mschunk {0} poly ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- angular ng build --prod 打包报错解决方案
使用以下代码 就不报错了 ng build --prod --no-extract-license 打包命令 使用以下代码 就不报错了 ng build --prod --no-extrac ...
- angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...
- ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作 代码体积最大 ng build --aot angular预编译 代码体积较小 ng build --pr ...
- 使用 ng build 构建后资源地址引用错误的问题
最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题. 最后在 index.html 的文件中发现有一个 ...
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- Angular CLI 升级 6.0 之后遇到的问题
Angular CLI 1.7.4 在使用 ng build --prod 会构建失败,而 ng build 是正常的.比较好的解决办法是使用 ng build --prod --extract-li ...
随机推荐
- java12-6 冒泡排序法和选择排序法
1.冒泡排序法 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 分析: 第一次比较排序的结果:会把其中最大的数据排到最大的索引处 第二次比较排序后的结果:因为第一次已经把最大的一个 ...
- C语言 二级指针内存模型③
//二级指针内存模型③ #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #incl ...
- C语言 百炼成钢14
//题目40:输入3个数a,b,c,按大小顺序输出.(使用指针完成) #include<stdio.h> #include<stdlib.h> //分析:用指针完成,说明不可以 ...
- android studio导jar包找不到类的解决方法
今天更新了universal-image-loader-1.9.5.jar文件,studio死活找不到其中相关的类,上网百度试了很多办法,总算解决了,具体方法跟一篇老外的帖子的差不多,这里分享下. 解 ...
- Linux内核分析——期末总结
Linux内核学习总结 首先非常感谢网易云课堂这个平台,让我能够在课下学习,课上加强,体会翻转课堂的乐趣.孟宁老师的课程循序渐进,虽然偶尔我学习地不是很透彻,但能够在后续的课程中进一步巩固学习,更加深 ...
- app:发布新版本的具体步骤
1
- 学习笔记——Maven实战(二)POM重构之增还是删
重构是广大开发者再熟悉不过的技术,在Martin Fowler的<重构——改善既有代码的设计>一书中,其定义为“重构(名词):对软件内部结构的一种调整,目的是在不改变软件之可察行为前提下, ...
- 数据挖掘系列(4)使用weka做关联规则挖掘
前面几篇介绍了关联规则的一些基本概念和两个基本算法,但实际在商业应用中,写算法反而比较少,理解数据,把握数据,利用工具才是重要的,前面的基础篇是对算法的理解,这篇将介绍开源利用数据挖掘工具weka进行 ...
- Unity发送参数给iOSNative并响应
unity想要给iOS客户端发送通知并相应.语言太苍白直接上代码. unity端创建两个C#文件 1.触发cs这个不用多说,大家估计都懂. using UnityEngine; using Syste ...
- 【android】实现一个自己的标题栏
完整项目下载 背景:项目中使用标题栏,只是简单的include一个标题栏的视图,赋值.控制元素显示.点击事件都要自己搞,不优雅! 要求: 1:对现有代码入侵最小 2:使用足够简单 OK,围绕着这个需求 ...