Angular本体を5.2から6系にメジャーバージョンアップで遭遇した壁

概要

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

公式のアップグレードガイド

• Angular Update Guide

やったこと

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

Before Updating

• 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

• Update any scripts you may have in your package.json to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX compliant.

• @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

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

• Update Angular Material to the latest version.

ng update @angular/material

This will also automatically migrate deprecated APIs.

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

After the Update

• 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 のエラー

Your global Angular CLI version (6.0.8) is greater than your local version (1.6.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
The specified command update is invalid. For available options, see 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 のエラー

Package "angularfire2" has an incompatible peer dependency to "rxjs" (requires "^5.5.4", would install "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

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.

• 解決策
  • 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
Running the automatic migrations. Please, be patient and wait until the execution completes.
Error: Cannot find module 'typescript'

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

npm install -g typescript

Observable.of のエラー

Observable.of is not a function

• 解決策
  • import { of } from 'rxjs'; を追加
  • Observable.of を of だけに変更
  • Observable.of is not a function with correct import - StackOverflow

switchMap のエラー

switchMap is not a function

• 解決策
  • pipe オペレータの中で switchMap を指定するように変更
  • I dont get rxjs 6 with angular 6 with interval, switchMap, and map - StackOverflow

Angularfire2 のエラー

Property 'downloadURL' does not exist on type 'AngularFireUploadTask'.

• 解決策
  • 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

date pipe のエラー

Unable to convert "Timestamp" into a date' for pipe '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