Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource'.ts(2345) in Angular Firebase project

Question

I am working on an Angular project that is deployed on Firebase. All the tutorials about Firebase suggest the following way to store Firebase in the app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(environment.firebase)), /* The problem line */
      provideFirestore(() => getFirestore()),
    ),
    provideRouter(routes)
  ],
};

I am currently have an error that is marked in VS Code and reported during ng serve: "Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource'.ts(2345)"

And I have no idea what to do and how to resolve that. I hope someone here can help me with that.

I tried many times different things. I have totally deleted and recreated my Firebase project, my application in Firebase, my Angular project. Nothing works.

If I am deleting the problem line, then the next one reporting the same problem.

Vidda

Answer 1

This is related to Angular version not angular/fire, to solve the problem just remove the importProvidersFrom as it's no longer needed.

Dunkle

Answer 2

Hello i cloud this can help you, i had the same problem i do this: Check your package.json angular fire version because last version 17.1.0 is making this problem with ImportProvidersSource, I tried this version 17.0.1. You could install by this: npm i @angular/[email protected] and it will work, try on a new project.

Hope this could help you.

Aceae

My @angular/fire is 17.0.1 and I still have the same error. The most annoying fact is that I have another project that uses the same and there is no such error. I have already copied package.json definitions from there but still no luck. – Vidda

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Fermat

I have a same issue. – Mcnamee

Answer 3

In Angular @18, just ommit the function importProvidersFrom.

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      provideFirestore(() => getFirestore())
  ]
};

Lilt

Answer 4

I just upgraded my angular application to 18.0.1 and got this error

TS2345: Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource'. [plugin angular-compiler]
[ng] 
[ng]     src/main.ts:63:47:
[ng]       63 │ ...orRoot(), provideFirebaseApp(() => initializeApp(environment.fi...

Following is my code in main.ts

main.ts

import { enableProdMode, importProvidersFrom, isDevMode } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";
import "zone.js";
import {
  RouteReuseStrategy,
  provideRouter
} from "@angular/router";
import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { providePerformance, getPerformance } from "@angular/fire/performance";
import { routes } from "./app/app.routes";
import { AppComponent } from "./app/app.component";
import { environment } from "./environments/environment";
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptorsFromDi } from "@angular/common/http";
import { getApp, initializeApp, provideFirebaseApp } from "@angular/fire/app";

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from "@angular/fire/auth";
import { getFirestore, provideFirestore } from "@angular/fire/firestore";
import { provideStorage, getStorage } from "@angular/fire/storage";
import {
  provideRemoteConfig,
  getRemoteConfig,
} from "@angular/fire/remote-config";
import { provideMessaging, getMessaging } from "@angular/fire/messaging";
import { provideFunctions, getFunctions } from "@angular/fire/functions";
import { Capacitor } from "@capacitor/core";
import { FirebaseAuthentication } from "@awesome-cordova-plugins/firebase-authentication/ngx";
import { CacheInterceptor } from "./app/classes/interceptor/cache.interceptor";
import { ApiLibModule } from "api-package";
import { ErrorInterceptor } from "./app/classes/interceptor/error.interceptor";
import { CustomHeaderInterceptor } from "./app/classes/interceptor/custom-header.interceptor";
import { provideServiceWorker } from '@angular/service-worker';
if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    FirebaseAuthentication,
    ApiLibModule,
    provideHttpClient(withInterceptorsFromDi()),
    {
        provide: HTTP_INTERCEPTORS,
        useClass: CacheInterceptor,
        multi: true,
    },
    {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true,
    },
    {
        provide: HTTP_INTERCEPTORS,
        useClass: CustomHeaderInterceptor,
        multi: true,
    },
    importProvidersFrom(IonicModule.forRoot(), provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => {
        if (Capacitor.isNativePlatform()) {
            return initializeAuth(getApp(), {
                persistence: indexedDBLocalPersistence,
            });
        }
        else {
            return getAuth(getApp());
        }
    }), provideFirestore(() => getFirestore()), provideFunctions(() => getFunctions()), provideMessaging(() => getMessaging()), providePerformance(() => getPerformance()), provideRemoteConfig(() => getRemoteConfig()), provideStorage(() => getStorage())),
    provideRouter(routes),
    provideServiceWorker('ngsw-worker.js', {
        enabled: !isDevMode(),
        registrationStrategy: 'registerWhenStable:30000'
    })
],
  
});

Mcnamee

is this an answer or a new question? – Cording