Upgrading to Angular8 when your app uses firebaseui : 'Package "firebaseui-angular" has an incompatible peer dependency'

#Upgrading to Angular8 when your app uses firebaseui : 'Package "firebaseui-angular" has an incompatible peer dependency'

Commands to upgrade from Angular7 to Angular8.
1. `npm install -g @angular/cli@latest`
2. `ng update @angular/cli @angular/core`
3. When your app is on material, `ng update @angular/material`

However your app uses FirebaseUI upgrading command No.2 fails spitting following error
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/0521f406-aa6e-fba4-ff90-25491857073a.png)

error message：
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").

No~~;(

###Resolution
- Delete firebaseui modules from Package.json file.

Delete the following two firebaseui modules in package.json(version 3.x.x）

```json
//package.json
…omit…
    "firebaseui": "^3.6.1",
    "firebaseui-angular": "^3.4.2",
…omit…
```

- I'm not sure if it's mandatory anyway comment out firebaseui related phrases in app.module.ts file.

```typescript
//app.module.ts
…omit…
 import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular'; // <-- Comment Out
…omit…
// start of FirebaseUI init code <-- Comment Out
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: '', 

};
// end of FirebaseUI init code 
…omit…
FirebaseUIModule.forRoot(firebaseUiAuthConfig), // <-- Comment Out
…omit…
```
- Run following Angular upgrade command No.2 (The command No.1 should be completed before)
`ng update @angular/cli @angular/core`

- Angular8 upgrading will be successful.

```bash
$ 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
```
- Then Run firebaseui install command.

```bash
$ npm install firebaseui-angular --save
$ npm install firebase firebaseui @angular/fire firebaseui-angular --save
```
-firebaseui install will be successful.version should be 4.x.x. Check out your package.json

```json
//package.json
…omit…
    "firebaseui": "^4.2.0",
    "firebaseui-angular": "^4.0.1",
…omit…
```

- Lastly take back firebaseui related phrases commented out in app.module.ts file and make them available.

- you can `ng serve -o` and smoke test your app.
<br>
######Appendix
Running `ng update @angular/material` also spits compatible error with flex-layout when you use it, do same way.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/32bdc1d2-78ab-49a3-2cf8-c6609aa3731c.png)
rf. Flex-layout install command: `npm i @angular/flex-layout`


<br>