angular项目打包_Angular从7到8，是否如丝般顺滑

每当框架或库的版本稍有大的改动，总会有人叫着学不动，其实升级无非就是加一些新的api，做一些优化，修复一些bug。

关于新特性这些就不废话了，版本刚发布的时候就有N多公众号、视频给你介绍这些，这里大家可以通过Angular完全开发手册的升级过程感受下。

升级环境

1. 首先把全局的angular-cli升到最新版本

npm install -g @angular/cli@latest

2. 更新项目中angular相关的包。

ng update --all

如果项目中依赖了其它包，可能导致上面的命令运行无法正常运行，

你可以一个个把它们更新掉再运行上面的命令，当然我选择了更简单粗爆的

ng update --all --force

接下来就是等这些包都更新完，so easy。

代码修复

**整个修复过程采取’懒修复‘，这种移花接木的叫法您姑且将就着看，我会默认项目能跑起来，直到它报错，一句话：不报错不修复**

升级完成后，到项目里运行 ‘ng serve'，不出意外肯定运行不起来，果真：

这个简单，就是ts版本的问题，错误信息不要太清楚

npm install -D [email protected]

OK，再来 ng serve，又是意料之中：

是否很头疼？这么多错误，但仔细一看，其实就是一个错误，所有报错的文件都是因为使用了 @ViewChild或者@ContentChild获取HTML中的元素，关于这个错误官方的ChangeLog讲的很明白了，请仔细看一看。如果你怕看英文的，这里是我看的时候随手翻译过的。如果你压根不想看，好吧，我没有任何办法。

解决了这些问题以后，接着再来 ng serve，讲真，这个是意料之外的：

好在报错信息很清楚，需要在tsconfig里加点东西

tsconfig.json

"files"

如果你的的项目做了服务端渲染，势必有另一个给服务端渲染打包用的tsconfig.json以及一个服务端的入口文件，比如我们这个项目里对应的是 tsconfig.server.json 和 main.server.ts，你需要像上面那样把入口文件加到对应的json文件中，注意路径写对。如果没有服务端渲染，请忽略。

ng serve 走起，意料之中的问题：

官方的ChangeLog里也有，懒加载的语法变了

之前的写法：

...

现在的写法

...
{path: 'xxx', loadChildren: import('./xx/yy/zz.module').then(mod => mod.ZzModule)}
···

相信改起来也很容易，再来 ng serve，又是意料之外

有兴趣可以自己查一下，解决方法很简单，还是在tsconfig.json里，把complierOptions的module改成'exNext'或'commonjs'。像下面这样：

"compilerOptions"

再来 ng serve，编译确实successful了，但当我打开浏览器时却是一片空白，整个人一个就不好，好在控制台一看，出了这么个妖蛾子：

好在之前就遇到过，是raw-loader版本的问题，因为刚开始粗爆的用了 --force，所以这个包被升级到2.0版本了，需要降回1.0

npm install -D [email protected]

继续 ng server， 完美！

到这里为止，可以说由7到8的升级过程就结束了。但是实际升级完成后还是遇到了一些小问题，就是上面说到@viewChild和@ContentChild，到底是使用 static: true 还是 false，这里就不废话了，changeLog里说的很清楚。如果你也有同样的问题，请仔细看一下。

真的要结束了，整个过程是否你如想像中的那般困难或简单？或者像标题里说的如丝般顺滑？不同的人有不同的答案，开心就好。

Angular完全开发手册​www.hijavascript.com