angular5.1to6.0

发表于

angular6版本升级和遇到的坑

我们的项目原来使用的是angular5, 最近angular出了6, 于是默默开始升级=.=

angular升级

升级前的准备

  • 把项目中的HttpModule和Http替换为HttpClientModule和HttpClient
  • 确保你的node版本在8以上

正式开始升级

  • 更新你的全局和本地Angular CLI

    1
    2
    3
    npm install -g @angular/cli
    npm install @angular/cli
    ng update @angular/cli

    此处我居然就卡主了😭, 更新了npm后npm install -g @angular/cli语句一直失败, 报的错好像是说npm找不到文件(感觉一定是在逗我), 尝试了许多方法一直无果. 最后采取了暴力手段…

    1
    2
    sudo rm -rf /usr/local/lib/node_modules/@angular
    rm /usr/local/bin/ng

    直接删除了文件😀

    现在再执行 npm install -g @angular/cli 果断成功了, 暴力还是有用的…

  • 将所有的Angular框架包更新到v6，以及RxJS和TypeScript的正确版本。

    1
    ng update @angular/core -dev --save

  • 将 Angular Materia l更新到最新版本

    1
    ng update @angular/material -dev --save

  • 根系rxjs

    1
    npm install rxjs@6 rxjs-compat@6 --save

此时, 官网上的步骤就结束了,

升级之后

于是我开心的执行了npm start. … 果然, 事情没有那么顺利,

一些小问题:

  • 删掉node_modules重新install

    一定是我忘记了什么, 果断删掉node_modules, 重新npm install 然后ng update @angular/cli了一次.

    此时打开项目一看, 原来的.angular-cli.json已经消失了, 多了一个名为angular.json的文件

    此时在运行npm start就没有错误了, 可以当我打开页面是却报错了…

  • global is not defined

    此时可以再控制台看到报错信息为Uncaught ReferenceError: global is not defined at Object../node_modules/intl/index.js

    解决方法: 在index.html里面定义global, 将一下代码加到index.html的head标签中

    1
    2
    3
    4
    5
    <script>
        if (global === undefined) {
          var global = window;
        }
    </script>

此时, 终于可以看到项目页面了, 仔细看了下没问题 V(＾－＾)V

关于build

一些错误处理