概要

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

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

概要