Angular8 firebase configuration error '@angular/fire/angularfire2'

Question

When trying to 'ng serve' after configuring angular with firebase, I got the error. Even though I googled this error message but could not find anything. In the error message, this issue is related to the library itself.

user@user-MacBookPro post % ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.15 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.78 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-02-10T01:58:36.888Z - Hash: 259e06990402b2940abe - Time: 3542ms

ERROR in node_modules/@angular/fire/angularfire2.d.ts:37:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
    Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
        Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
          Type 'T[string]' is not assignable to type '(...args: any) => any'.

37     [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never;
                                                   ~~~~
node_modules/@angular/fire/angularfire2.d.ts:40:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
    Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
        Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
          Type 'T[string]' is not assignable to type '(...args: any) => any'.

40     [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? never : K;
                                                   ~~~~
node_modules/@angular/fire/angularfire2.d.ts:48:78 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
      Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
        Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
          Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
            Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
              Type 'T[string]' is not assignable to type '(...args: any) => any'.

48     [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
                                                                                ~~~~
node_modules/@angular/fire/angularfire2.d.ts:48:107 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
      Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
        Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
          Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
            Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
              Type 'T[string]' is not assignable to type '(...args: any) => any'.

48     [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
                                                                                                             ~~~~
node_modules/@angular/fire/angularfire2.d.ts:50:75 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.

50     [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
                                                                             ~~~~
node_modules/@angular/fire/angularfire2.d.ts:50:96 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.

50     [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
                                                                                                  ~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

This is a package.json file. This project is based on Angular8, firebase version 6.

{
  "name": "post",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^6.0.0-rc.1",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "firebase": "^7.8.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.24",
    "@angular/cli": "~8.3.24",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';

//angular-fire
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
//      in version 6, StorageBucket changes to BUCKET
import { AngularFireStorageModule, BUCKET  } from "@angular/fire/storage";

// component list
import { AddpostComponent } from "../app/addpost/addpost.component";
import { MainComponent } from "../app/main/main.component";
import { PostComponent } from "../app/post/post.component";


// forms module for AddpostComponent
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import {ServiceService  } from "./service.service";


@NgModule({
  declarations: [
    AppComponent,
    AddpostComponent,
    MainComponent,
    PostComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireStorageModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [{ provide: BUCKET, useValue: 'gs://angular-firebase-rxjs.appspot.com' }, ServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

This error is due to TypeScript type checking the definitions file of the AngularFire library.

Notice the errors are from node_modules/@angular/fire/angularfire2.d.ts:37:49.

To avoid this error you have to set some options in tsconfig.json.

tsconfig:

{
  //...
  compilerOptions: {
    "skipLibCheck": true,
    //...
  }
}

skipLibCheck: Skip type checking of declaration files.

More info on the skipLibCheck option.