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

What steps do I need to take to enable the about page functionality in the angular seed advance project?

After carefully following the instructions provided on this page https://github.com/NathanWalker/angular-seed-advanced#how-to-start, I successfully installed and ran everything. When running npm start, the index page loads with 'Loading...' I ha ...

angulartypescriptangular-seed

Using TypeScript to wrap a class with a Proxy object

I've been working on a function that takes an API interface (I've provided a sample here) and creates a Proxy around it. This allows me to intercept calls to the API's methods, enabling logging, custom error handling, etc. I'm running i ...

javascripttypescripttypescript-generics

"Error encountered in @mui/x-data-grid's ValueGetter function due to undefined parameters being passed

I'm currently using @mui/x-data-grid version 7.3.0 and I've encountered a problem with the valueGetter function in my columns definition. The params object that should be received by the valueGetter function is showing up as undefined. Below is ...

javascriptreactjsgoogle-cloud-firestorematerial-uidatagrid

Asynchronous NestJs HTTP service request

Is there a way to implement Async/Await on the HttpService in NestJs? The code snippet below does not seem to be functioning as expected: async create(data) { return await this.httpService.post(url, data); } ...

javascriptnode.jstypescriptnestjs

Transforming an array of HTTP Observables into an Observable that can be piped asynchronously

I am attempting to execute a series of XHR GET requests based on the results of an initial request. I have an array of observables representing the secondary requests I wish to make, and I am able to utilize Array.map for iterating over them and subscribin ...

javascriptangularrxjsobservablerxjs6

Issue encountered while authenticating client secret from backend for newly created Stripe subscription

There seems to be an issue with confirming the client secret sent from the express backend to the frontend, specifically in a React Native-based mobile application. The clientSecret is being sent in the same manner as described above. On the frontend Rea ...

node.jstypescriptreact-nativeexpressstripe-payments

Unable to determine all parameters for Angular's DataService

I have been working on developing a versatile service and came across an informative article: https://medium.com/@krishna.acondy/a-generic-http-service-approach-for-angular-applications-a7bd8ff6a068 that guided me in creating my DataService. Here is a snip ...

angular

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Assuming I have an array of objects structured like this: const events: Array<{year: number, month: number, date: number}> = [ {year: 2020, month: 10, date: 13}, {year: 2021: month: 3, date: 12}, {year: 2021: month: 9, date: 6}, {year: 2021: mont ...

javascriptangulartypescript

ngx-timeago encounters errors during deployment of Angular application

When I build my project locally, everything goes smoothly... However, when using aws code build with a docker image and running npx ng build, the following error occurs: #25 41.40 ./node_modules/ngx-timeago/__ivy_ngcc__/fesm2015/ngx-timeago.js:439:76-112 ...

angular

Explain a TypeScript function that takes an object as input and returns a new object with only the

Check Playground What's the best way to define a type for this specific function? The inputObject should contain all keys from the enablePropertiesArray and may have additional ones. The function is expected to return a copy of the inputObject, inclu ...

typescript

Arranging Alphanumeric Characters in Angular in Ascending Order

I am trying to sort a list of characters first, followed by alphanumeric values. Here is what I have: [Austria , Germany , 123aed , 234eds] This is my current sorting attempt: obj.sort((a,b) => { if ( (isNaN(a.text) && isNaN(b.text)) || ...

angulartypescript

Changes to base URL in Angular causing caching of index.html for select users

Let me share with you a story involving a version upgrade issue. Our Angular dashboard is hosted on an "Azure App Service Web App". It communicates with a NodeJS backend, which is also served by another Azure instance. So far, we have deployed two releas ...

angularazuregoogle-chromecaching

`Can incompatible Typescript types be allowed for assignment?`

Currently, I am faced with the challenge of sharing type definitions between my server and front-end. These definitions are stored in a separate npm package that both installations utilize. The issue arises on the front-end where variables containing Objec ...

mongodbtypescriptmongoose

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

reactjstypescriptvisual-studio-codeenumsvscode-snippets

"Capture input value changes and display the previous value when submitting a post. See an example of

Hi there! I'm facing 2 issues with my code, you can find a DEMO here When adding a product to the sale form, the input field for `description` changes for all products. Changing the input product in the sale does not reflect the change. I have shar ...

angularformstypescriptangular-reactive-forms

How to retrieve the data from a PHP file using Angular 4 CLI?

Is there a way to retrieve the response from a PHP file using Angular 4? If the PHP file is placed in the assets folder, the GET request will identify the file and proceed to download its content. For example: headers: Headers ok: true status: 200 status ...

phpangular

Transferring a variable from an Angular 2 constructor into the template via the then statement

I'm struggling with implementing a secure login system. My goal is to first check the device's native storage for an item named 'user', then verify if the user exists in our database, and finally retrieve the unique id associated with t ...

javascriptangulartypescriptionic2

Error encountered when accessing Firebase database, resulting in a NullPointerException for

I have been developing a new application that utilizes the Firebase database with two Booleans stored inside: important_job and washed. "TEST" : { "TEST" : { "Current_job" : { "important_job" : true, " ...

javaandroidfirebasefirebase-realtime-database

Ensure data accuracy by triggering the cache - implementing SWR hook in Next.js with TypeScript

I recently implemented the swr hook in my next.js app to take advantage of its caching and real-time updates, which has been incredibly beneficial for my project (a Facebook clone). However, I encountered a challenge. The issue arises when fetching public ...

javascriptreactjstypescriptnext.jsswr

Ways to make a chosen row stand out in an *ngFor loop?

Struggling to find a solution within Angular2 for setting a css class when selecting a row. I want to achieve this without relying on jQuery. <table class="table table-bordered table-condensed table-hover"> <thead> <tr> ...

csstwitter-bootstrapangularhtml-table