Angular8へアップグレードできない : Package "firebaseui-angular" has an incompatible peer dependency

Angular7からAngular8へのアップグレード。手順としては次の通り。

1. npm install -g @angular/cli@latest
2. ng update @angular/cli @angular/core
3. もしマテリアル使ってたら、ng update @angular/material

しかしFirebaseUIを使用していると2のコマンドで以下のようなエラーがでてアップグレードできない。

エラーメッセージ：
Package "firebaseui-angular" has an incompatible peer dependency to "@angular/core" (requires "^6.1.2" (extended), would install "8.2.13").
Package "firebaseui-angular" has an incompatible peer dependency to "@angular/common" (requires "^6.1.2" (extended), would install "8.2.13").

オゥ～

解決方法

• まずPackage.jsonからfirebaseui関連を削除。

下記のfirebaseui関連のモジュール2行を削除してしまう。(バージョンが3.x.xとなってると思う）

//package.json
…省略…
    "firebaseui": "^3.6.1",
    "firebaseui-angular": "^3.4.2",
…省略…

• 必要な作業かわからないがapp.module.ts内のfirebaseui関連の一連の記述を一応コメントアウトしておく。

//app.module.ts
…省略…
 import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular';
…省略…
// FirebaseUI初期化コード
const firebaseUiAuthConfig: firebaseui.auth.Config = {
  autoUpgradeAnonymousUsers: false,
  signInFlow: 'popup', // redirect or popup
  signInOptions: [
  firebase.auth.GoogleAuthProvider.PROVIDER_ID,  
    {
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        'auth_type': 'reauthenticate'
      },
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
    },

    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
   {
      requireDisplayName: false,
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
   },

    firebase.auth.PhoneAuthProvider.PROVIDER_ID,
  　firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
  ],
  tosUrl: 'http://localhost:6200/TOS',
  privacyPolicyUrl:
  signInSuccessUrl: 'http://localhost:6200/home',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM,
  siteName: '', 

};
// FirebaseUI初期化コードここまで
…省略…
FirebaseUIModule.forRoot(firebaseUiAuthConfig),
…省略…

• Angularアップグレードコマンドを走らせる。
  ng update @angular/cli @angular/core

• Angular8へのアップグレードが成功する。

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.18
Node: 10.15.3
OS: win32 x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.18
@angular-devkit/build-angular     0.803.18
@angular-devkit/build-optimizer   0.803.18
@angular-devkit/build-webpack     0.803.18
@angular-devkit/core              8.3.18
@angular-devkit/schematics        8.3.18
@angular/cdk                      7.3.4
@angular/cli                      8.3.18
@angular/fire                     5.2.1
@angular/flex-layout              7.0.0-beta.24
@angular/material                 7.3.4
@angular/pwa                      0.803.18
@ngtools/webpack                  8.3.18
@schematics/angular               8.3.18
@schematics/update                0.803.18
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

• firebaseuiのインストールコマンドを走らせる。

$ npm install firebaseui-angular --save
$ npm install firebase firebaseui @angular/fire firebaseui-angular --save

-firebaseuiのインストールが成功。バージョンが4.x.xになっているはず。

//package.json
…省略…
    "firebaseui": "^4.2.0",
    "firebaseui-angular": "^4.0.1",
…省略…

• さいごにapp.module.ts内のコメントアウトしたfirebaseui関連の一連の記述を元に戻す。

• これでng serve -oして動作確認、問題ないはず。

以上。 `ng update @angular/material`でマテリアルをアップデートするときも同様にflex-layoutとのコンパチブルエラーがでるが、同様の手法でアップデートできるだろう。