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

17,221

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.

Share:
17,221
CalgaryFlames
Author by

CalgaryFlames

Keep calm and love programming.

Updated on June 18, 2022

Comments

  • CalgaryFlames
    CalgaryFlames almost 2 years

    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 { }