AngularFire 17.1.0 breaks - Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource'

[woutersteven]

AngularFire 17.1.0 breaks - Argument of type 'EnvironmentProviders' is not assignable to parameter of type 'ImportProvidersSource'

[jamesdaniels]

Oh fun, that shouldn't have broken... sorry probably should have saved that one for v18.

You can pull the "provideFirebase" functions outside of the importProvidersFrom call and you'll be back up and running again.

[schreibse]

I'm sorry I didn't understand this - if I pull all the @angular/fire providers outside the importProvidersFrom function, and add them to the providers array directly, the error stays the same (on v18, both NG and Fire).. any help? Here is my firebase config:

import { importProvidersFrom, EnvironmentProviders, Injector } from '@angular/core';
import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, initializeAuth, browserPopupRedirectResolver } from '@angular/fire/auth';

import { environment } from '@environment';
import { browserLocalPersistence, browserSessionPersistence } from '@firebase/auth';

const firebaseProviders: EnvironmentProviders = importProvidersFrom([
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() =>
        initializeAuth(getApp(), {
            persistence: [browserSessionPersistence, browserLocalPersistence],
            popupRedirectResolver: browserPopupRedirectResolver
        })
    )
]);

export { firebaseProviders };

simple example for app.config.ts (Angular 18).

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

As you can see, both provideFirebaseApp as well as provideFirestore are not inside the importProvidersFrom function, like required before and you are using in your example above, that was meant with "pull outside importProvidersFrom". Does this help?

[spock123]

@schreibse thanks, that is what I tried but got the same issue.. I'll give it another shot.. thank you so much
Is it also provideAuth that should be pulled out?

[mjgul]

It was working fine with angular < 18, I just upgraded to angular 18 and facing this error:

[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...

[spock123]

Hey guys, I managed now by pulling the calls out, as suggested. Previously I got errros when doing so but it works now, thank you all for good suggestions.

Edit: I see now that the error I had was fixed with the newly added version 18.0.1 #3536

[spock123]

@schreibse it seems to be working with @angular/fire 18.0.1

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[woutersteven]

Thank you for the fast reply, that worked!

[spock123]

I'm sorry I didn't understand this - if I pull all the @angular/fire providers outside the importProvidersFrom function, and add them to the providers array directly, the error stays the same (on v18, both NG and Fire).. any help? Here is my firebase config:

import { importProvidersFrom, EnvironmentProviders, Injector } from '@angular/core';
import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, initializeAuth, browserPopupRedirectResolver } from '@angular/fire/auth';

import { environment } from '@environment';
import { browserLocalPersistence, browserSessionPersistence } from '@firebase/auth';

const firebaseProviders: EnvironmentProviders = importProvidersFrom([
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() =>
        initializeAuth(getApp(), {
            persistence: [browserSessionPersistence, browserLocalPersistence],
            popupRedirectResolver: browserPopupRedirectResolver
        })
    )
]);

export { firebaseProviders };

[schreibse]

@schreibse thanks, that is what I tried but got the same issue.. I'll give it another shot.. thank you so much Is it also provideAuth that should be pulled out?

yes, everything related to firebase has to be pulled out of importProvidersFrom .

It might help to read the steps/code of the AngularFire web codelab

[spock123]

@schreibse I am on ng18 btw

[schreibse]

It was working fine with angular < 18, I just upgraded to angular 18 and facing this error:

[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...

yes, hence this issue. Did you try the proposed solution It works fine after extracting everything firebase related from importProvidersFrom(...)

@schreibse I am on ng18 btw
Me as well! I created a new angular workspace with cli and configured firebase.
From package.json:

"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/fire": "^18.0.1",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",

After I encountered the error I found this issue with the working solution. Please share your app.config.ts as well as separate provider files (from your code snippet above it seems like you have one for firebase)