error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s)

Viewed 8815
ERROR in node_modules/@angular/fire/firestore/firestore.module.d.ts:7:74 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
    
    7     static enablePersistence(persistenceSettings?: PersistenceSettings): ModuleWithProviders;

I am getting the above error on adding firebase to my Angular 10 project. (no issues with old angular 9 project)

Steps I took to add firebase

  1. npm install firebase @angular/fire --save

  2. ng add @angular/fire

  3. updated environment.ts

  production: false,
  firebase: {
    apiKey: <secret> ,
    authDomain: <secret>,
    databaseURL: <secret>,
    projectId: <secret>,
    storageBucket: <secret>,
    messagingSenderId: <secret>,
    appId: <secret>,
    measurementId: <secret>
  }
}; 
  1. Updated app.module.ts
// Firebase imports
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule} from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    QuicklinkModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    SharedModule,

    AngularFireModule.initializeApp(environment.firebase), // Main Angular fire module
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ModuleWithProviders Migration Angular.io documentation

4 Answers

I have the latest version of angular and got the same issue, just added this line :

 "skipLibCheck": true;

to tconfig.app.json

    {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "skipLibCheck": true
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

Workaround from GitHub issue

working : update tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "skipLibCheck": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

append "skipLibCheck": true

As pointed out in another answer, this issue has already been fixed: https://github.com/angular/angularfire/commit/93912bc3e9e41d48628a8671c766b0c2e8b65dc8

But it's not included in the latest stable release of @angular/fire (version 6.0.2 which was released late june) which you are using. However, there is a fix version available which is not a stable release but fixed. If you change your version of @angular/fire to 6.0.3-canary.93912bc it will work with the latest Angular 10 build.

Related