从Angular4升级到Angular6

接手了一个Angular4的旧项目，第一时间就升级到最新的Angular6版本，因此记录一下彩到的一些坑

Angular4 到 Angular5

Angular升级指南

在升级指南中选择需要升级的版本和升级到的版本，就可以根据指南来对项目进行升级，因为本来的Angular项目版本是4.4.6，因此升级后运行也没有报错。

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@^5.2.0 [email protected] rxjs@^5.5.2

Angular5 到 Angular6

Angular5 到 Angular6 也同样按照上面的升级指南来操作

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

在升级Angular-cli的时候遇到一些问题，因为版本的原因，直接把本地的Angular-cli升级到6版本是不行的，因为之前版本的cli文件是.angular.cli.json，而新版本的cli文件是angular.json，因此通过查阅github上Angular-cli的release得知，Angular-cli1.7.4版本下运行ng update @angular/cli可以自动迁移到angular.json。

完成升级后，再运行项目就报错了

Rxjs

导入的包更改为from "rxjs"
如果要导入命令，则from "rxjs/operators"
命令需要用.pipe()包裹，如下代码所示
catch、do、finally方法重命名为catchError、tap、finalize

import { catchError, tap, finalize } from 'rxjs/operators'

...

.pipe(
  catchError(this.onCatch),
  tap((res: T) => {
    this.onSuccess(res);
  }, (error: any) => {
    this.onError(error);
  }),
  finalize(() => {
    if (isHideLoader) {
      this.onEnd();
    }
  }));

Ng2-dragula

在Angular6版本下该插件会报错，在github上issue找到解决方案：

在app目录下的pollfills.ts文件下加上以下代码：

(window as any).global = window;

CSS改为SCSS

修改angular.json配置文件

"styles": [
  "src/styles.scss"
],

"@schematics/angular:component": {
  "prefix": "app",
  "styleext": "scss"
},

其它

项目组的其它成员需要重新安装依赖包，如果有一些奇怪的问题可先删除node_modules并清空缓存，然后再重新安装。

总结

至此便完成了angular版本的升级，毫无疑问，持续把项目更新到最新是非常重要的，新版本会带来更好的性能和安全性。而且如果有其他人来接手这个项目也可以直接学习最新的知识并应用在项目上。

from: 2018-07-12 20:59:02