在遇到Angular的升级难题时，从5.2版本升级到6系列

2 年 ago

韵, 科

3 minutes

总结

Angular本体を5.2から6系にメジャーバージョンアップした際の足跡と引っかかった点のメモ

公式升级指南

Angular Update Guide

做过的事。

公式の Update Guide から、該当したものだけを抜き出し、足りなかった部分を追記

更新之前

Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

npm install -g @angular/cli
npm uninstall @angular/cli --save
npm install @angular/cli --save-dev
ng update @angular/cli

@angular/core をupdateした際に angularfire2 で下記のエラーを防ぐため、 rxjs-compat をインストール

Package “angularfire2” has an incompatible peer dependency to “rxjs” (requires “^5.5.4”, would install “6.2.2”).

npm install --save rxjs-compat

@angular/flex-layout の6系最新版を個別にインストール (下記のエラー用の対応)
> Package “@angular/flex-layout” has an incompatible peer dependency to “rxjs” (requires “^5.5.0”, would install “6.2.2”).
> Incompatible peer dependencies found. See above.

npm install --save @angular/flex-layout@6.0.0-beta.16

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core

更新后，TypeScript 和 RxJS 将更准确地在应用程序中流动类型，这可能会暴露应用程序类型中的现有错误。

Update Angular Material to the latest version.

ng update @angular/material

这将同时自动迁移过时的API。

Use ng update or your normal package manager tools to identify and update other dependencies.

更新后

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules.
For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
npm install -g typescript
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

npm uninstall rxjs-compat --save

在更新過程中遇到的錯誤。

@angular/cli 的错误

您的全局 Angular CLI 版本（6.0.8）比本地版本（1.6.8）更高。将使用本地 Angular CLI 版本。

如果要禁用此警告，请使用 “ng config -g cli.warnings.versionMismatch false” 命令。
指定的更新命令无效。有关可用选项，请参阅 ng help。

一旦uninstallし、改めてinstallすると、最新版の6系がインストールされる
angular/angular-cli – ng update failed with angular 5 project generated by CLI 1.7.4 #10664

npm uninstall @angular/cli --save
npm install @angular/cli --save-dev

AngularFire2 的错误

软件包”angularfire2“与”rxjs“存在不兼容的同行依赖关系（需要”^5.5.4“，但实际上安装的是”6.2.2“）。

rxjs-compat をインストール
angularfire 2 isn’t working with Angular 6 #1602

npm install --save rxjs-compat

@angular/flex-layout 出错

$ ng update @angular/core

软件包“@angular/flex-layout”与“rxjs”有不兼容的同级依赖关系（需要“^5.5.0”，但安装的是“6.2.2”）。
发现不兼容的同级依赖关系。请参见上文。

flex-layoutの6系最新版を個別にインストール
angular/flex-layout – Angular 6 support #735

npm install --save @angular/flex-layout@6.0.0-beta.16

rxjs-5-to-6-migrate的错误

$ rxjs-5-to-6-migrate -p src/tsconfig.app.json
正在运行自动迁移。请耐心等待，直到执行完成。
错误：找不到模块“typescript”。

グローバルに typescript をインストール
ReactiveX/rxjs-tslint – rxjs-5-to-6-migrate – cannot find any possible migration

npm install -g typescript

Observable.of 的错误。

(Observable.of’s error)

Observable.of 不是一个函数
– 解决方法：
– 添加 import {of} from ‘rxjs’;
– 将 Observable.of 更改为只使用 of
– 带有正确导入方式的 Observable.of is not a function – StackOverflow

转换映射函数的错误

switchMap 不是一个函数

– 解决方案
– 在管道操作符中使用 switchMap 替代
– 我不明白在 Angular 6 和 RxJS 6 中使用 interval、switchMap 和 map 的内容 – StackOverflow

Angularfire2出现错误。

类型 ‘AngularFireUploadTask’ 上不存在属性 ‘downloadURL’。

downloadUrl が無くなったので、形式を大幅に変更する必要あり
AngularFireStorage – angularfire2/docs/storage/storage.md
Angularfire2 Error “Property ‘downloadURL does not exist on type ‘AngularFireUploadTask’.”

https://blog.angular.io/file-uploads-come-to-angularfire-6842352b3b47
rxjs-compat missing ‘toPromise’ operator

日期管道的错误

无法将“Timestamp”转换为日期’ 用于管道 ‘DatePipe’。

{{ createdAt.toDate() | date:’yyyy/MM/dd HH:mm’ }} のように、 .toDate() を加える
DatePipe is not working correctly in Angular 6 – StackOverflow

ng build产生的错误

ng build のオプションから –target と –environment は無くなった
代わりに、 –configuration を使う

ng build –aot –target=production –environment=dev を書き換える場合

angular.json の configurations 内に、 production と同じ中身で dev を追加し、 fileReplacements だけ削除
その他のパラメータは、必要に応じて変更
コマンド部分を ng build –configuration=dev に置き換え

          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }

请参考

Version 6 of Angular Now Available