解决：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 your styleUrls in all your files. Webpack understands LESS and SASS so you can use styleUrls: ['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打包也成功了！

　　　　打包出来的东西少很多了！！



研究得出，它的配置文件是这个：