Cannot proceed with module import: Type 'ModuleWithProviders<T>' must have a single type argument

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;

The above error is popping up as I try to integrate Firebase into my Angular 10 project. There were no issues when working with an older Angular 9 project.

Here are the steps I followed 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 { }

Check out the ModuleWithProviders Migration Guide on Angular.io for more information.

angulartypescriptfirebasegoogle-cloud-firestoreangular10

Answer №1

After updating to the newest release of Angular, I encountered a similar issue. Fortunately, I was able to resolve it by including the following line:

"skipLibCheck": true;

within 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"]
}

Answer №3

Found a solution on a GitHub thread

Solution : Make changes to tsconfig.app.json

/* For more information about this file, visit: 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"
  ]
}

Add the line "skipLibCheck": true

Answer №4

A solution has been identified for the issue mentioned earlier; it has already been addressed and resolved. You can find more information here: https://github.com/angular/angularfire/commit/93912bc3e9e41d48628a8671c766b0c2e8b65dc8

Although the latest stable release of @angular/fire (version 6.0.2) does not include this fix, there is a corrected version available as 6.0.3-canary.93912bc. Even though it's not yet in a stable state, this version will address the issue and work seamlessly with the most recent Angular 10 build.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using NextJs <Script> is only effective after a page has been reloaded

Currently delving into the world of NextJS and encountering an issue with integrating a third-party ebay script onto one of my route pages. The script only seems to appear sporadically upon reloading the page. However, when navigating to the store page via ...

javascriptreactjstypescriptnext.js

Issues encountered while setting up @angular/google-maps on angular13

Every time I attempt to install, this error displays: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402d21306d212323 ...

angularnpmangular-google-maps

Developing a declaration for an unnamed function in a JavaScript file

module.exports = function (argument1, argument2) { return { myFunction } function myFunction () { ... } } What is the process for creating a TypeScript declaration file for this specific JavaScript file? ...

typescript

Align item in center of remaining space within container using Material-UI React

I am relatively new to MUI and styling HTML components, and I have a query. I'm currently utilizing the Grid feature in my React project. My goal is to achieve something similar to this (image edited in Paint, alignment may not be accurate): https://i ...

reactjstypescriptmaterial-uivite

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

typescriptvisual-studio-codematerial-uireact-hook-formcodesandbox

How to use Angular template syntax to assign an async array to multiple variables

When working in JS, there is a clever method for assigning values from an array to new variables with ease: let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3 I started thinking about whether I could achieve a similar elegant solution using Angular's ...

angulartypescriptrxjs

Testing Angular HTTP error handlers: A comprehensive guide

Below, you will find an example of code snippet: this.paymentTypesService.updatePaymentTypesOrder('cashout', newOrder).subscribe(() => { this.notificationsService.success( 'Success!', `Order change saved successfully`, ...

angularunit-testingtypescript

Error encountered when sending a POST request: net::ERR_CERT_COMMON_NAME_INVALID

Trying to send a POST request from a React app hosted on Firebase to an API built with express.js and Firebase Cloud Functions is resulting in failure. The error message received is: POST "Request URL" net::ERR_CERT_COMMON_NAME_INVALID Upon rese ...

reactjsfirebaseexpressgoogle-cloud-functionsfirebase-hosting

Is there a way to fetch a particular object from Firebase database based on its value using AngularFire2?

Here is the database I am working with: firebase database I am trying to retrieve a dish that has its 'featured' attribute set to true (dish.feature = true). Is it possible to do this directly from the database, or do I have to retrieve all di ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire2

Converting docx files to PDF in Angular 15 using the "docxjs" library: A step-by-step guide

I am currently utilizing the to generate some docx files and enable downloading, but I am faced with the challenge of converting these files into PDF format. This is my current process: public download(data: any): void { const documentCreator = new D ...

angulartypescriptpdfdocxdocx-to-pdf-conversion

Is there a way to correct Typescript's misunderstanding of the interface from a JSON file that has been imported?

The structure of my JSON file is as follows: [ { "keys": [ { "date": "2019-06-25T17:33:39.000Z" } ], "tag": null }, { "keys": [], "tag": "stringvalue" } ] Upon importing the file, Typescript assumes that ke ...

typescript

How to Position Logo in the Center of MUI AppBar in React

I've been struggling to center align the logo in the AppBar. I can't seem to get the logo to be centered both vertically and horizontally on its own. Here is my code from AppBar.tsx: import * as React from 'react'; import { styled, useT ...

reactjstypescriptmaterial-ui

Getting the current page name within the app.component.ts file in Ionic 3 - a simple guide

Is it possible to retrieve the current active page name within the app.component.ts file in Ionic without having to add code to any other pages? ...

typescriptionic3

The template is displaying the string as "[object Object]"

I've implemented code in my ngOnInit function to fetch the translation for a specific text. The following function is being called: async getEmailTranslation() { const email$ = this.translate.get('SUPPORT_TRANSLATE.EMAIL'); this.emai ...

angulartypescript

Using Typescript with React functional components: the proper way to invoke a child method from a parent function

My current setup is quite simple: <Page> <Modal> <Form /> </Modal> </Page> All components mentioned are functional components. Within <Modal />, there is a close function defined like this: const close = () => ...

reactjstypescript

Developing a custom camera system for a top-down RPG game using Javascript Canvas

What specific question do I have to ask now? My goal is to implement a "viewport" camera effect that will track the player without moving the background I am integrating websocket support and planning to render additional characters on the map - movement ...

javascripttypescriptcanvashtml5-canvas

What is the reason for the lack of compatibility between the TypeScript compilerOptions settings 'noEmitOnError: true' and 'isolatedModules: false'?

Whenever I try to execute TypeScript with isolatedModules set as true and then false, I keep encountering this error message: tsconfig.json(5,9): error TS5053: Option 'noEmitOnError' cannot be specified with option 'isolatedModules'. ...

typescripttsconfigcompiler-options

Utilize swipe gestures in tables with Angular and Ionic for enhanced user interaction

I'm working on creating a swiping functionality for table pagination. Swiping right will take you to the next page, while swiping left will move you back to the previous page. Here's the code snippet of my table: <table #tableElement id=&qu ...

angularionic-frameworkswipe

Issue detected in React Rollup: the specific module 'name' is not being exported from the node_modules directory

Currently in the process of creating a library or package from my component. The tech stack includes React, Typescript, and various other dependencies. Encountering an error while using Rollup to build the package: [!] Error: 'DisplayHint' is ...

javascriptreactjstypescriptwebpackrollup

Ways to carry out two distinct actions following a successful service call with NGRX

I am currently working on a product search feature. The process involves dispatching a 'search_start' action with specific parameters for the search. This action triggers an effect that communicates with a service to retrieve a list of products b ...

angularrxjsngrxrxjs6ngrx-effects