angular4升级到angular6详细过程

前言：公司angular框架升级，先拿自己项目练习一下趟趟坑...

前提条件：

    确保node满足如下条件，否则去官网下载升级包；

    $ node -v

    node >= 8.9.0

    $ npm -v

    npm >= 5.6.0

    还要保证你的网络足够好，网络不好，会莫名其妙报很多错....

1.升级全局Angular-Cli

    $ npm uninstall -g @angular/cli // 卸载旧版本cli。

    $ npm cache clean –-force // 清除缓存，确保卸载干净

    注：如果卸载全局包失败可以在本地目录下手动删除（window10）

    C:\Users\{User}\AppData\Roaming\npm\node_modules

    $ npm install -g @angular/cli@latest

    完成之后 ng version 看一下版本 确保没有问题。

    

2. 升级项目中的angular-cli

    $ npm uninstall --save-dev angular-cli

　$ npm install --save-dev @angular/cli@latest

　$ ng update @angular/cli      更新cli ，生成angular.json文件，环境已经配置好；

　ps:需要删除当前项目中的package-lock.json，否则下载cli会报错

3.更新rxjs检测

    $ npm install --save-dev  rxjs-tslint

4.更新核心模块

    $ ng update @angular/core

这里有报错信息，原因是版本不对

升级 @angular/compiler 和 @angular/core后面指定的版本，一定要指定对后面的版本,执行下面两行：

$ npm install @angular/compiler@^7.1.3

$ npm install @angular/core@^7.1.3

后再次运行ng update @angular/core， 没有报错啦。

5. 所有步骤完成之后，试着跑一下项目，（因为我的4200端口已经占用了，指定了4201端口，看自己是否需要）

    ng serve –port 4201

    

    升级之后有些语法已经不一样，请照下图改正：

    

6. 改完之后，再次运行，完美！