Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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

やったこと

  • 公式の 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.

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").

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.

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'

npm install -g typescript

Observable.of のエラー

Observable.of is not a function
- 解決策
- import { of } from 'rxjs'; を追加
- Observable.ofof だけに変更
- 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'.

date pipe のエラー

Unable to convert "Timestamp" into a date' for pipe 'DatePipe'

ng buildのエラー

  • ng build のオプションから --target--environment は無くなった
  • 代わりに、 --configuration を使う
  • ng build --aot --target=production --environment=dev を書き換える場合
    • angular.jsonconfigurations 内に、 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
            }
          }

参照

okyawa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away