Support for @angular/fire modular library

[gorden0929]

In my use case @angular/fire compat library have problem when upgrade to typescript v4.8 and above. Angular 15 has drop support for below typescript v4.8 So i decided to move to @angular/fire modular. The code change in app.module.ts as below.

old code:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

new code:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

I got this error when I go to the page

How do I use firebaseui-angular with the new @angular/fire modular library?

[filipg]

I'm also facing the same issue. Any updates on this?

[RaphaelJenni]

I'm looking into it.

[RaphaelJenni]

Please try to add a custom provider:

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

@NgModule({
    ...
    providers: [
        { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }
    ],
})

Thanks to https://stackoverflow.com/a/71445543/7893818

[gorden0929]

This works for me. Thank you very much.

[pgrm]

@RaphaelJenni the fix doesn't seem to be working with Firebase 9.22.2 anymore, but it only breaks when the app is built for deployment, it still works when I run it in dev with ng serve.

This is the output of my compiler with Firebase 9.22.1:

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.e78874c24a3dfa43.js      | main          |   1.70 MB |               407.84 kB
styles.672460522ad99145.css   | styles        | 150.99 kB |                [16](https://github.com/nexpack/nexpack/actions/runs/5237633452/jobs/9455939362#step:11:17).26 kB
polyfills.84c353219c3e4ab5.js | polyfills     |  33.04 kB |                10.67 kB
runtime.5e2210a9ca3630f7.js   | runtime       |   1.57 kB |               833 bytes

| Initial Total |   1.89 MB |               435.58 kB

Build at: [20](https://github.com/nexpack/nexpack/actions/runs/5237633452/jobs/9455939362#step:11:21)23-06-11T[21](https://github.com/nexpack/nexpack/actions/runs/5237633452/jobs/9455939362#step:11:22):41:21.[22](https://github.com/nexpack/nexpack/actions/runs/5237633452/jobs/9455939362#step:11:23)7Z - Hash: 5403a095b42b5260 - Time: 77600ms

and this is the output with 9.22.2

Initial Chunk Files           | Names                |  Raw Size | Estimated Transfer Size
main.51cd648f0001a325.js      | main                 |   1.96 MB |               423.36 kB
styles.672460522ad99145.css   | styles               | 150.99 kB |                [16](https://github.com/nexpack/nexpack/actions/runs/5236035892/jobs/9453285312#step:11:17).26 kB
polyfills.84c353219c3e4ab5.js | polyfills            |  33.04 kB |                10.67 kB
runtime.8281034cced7a8ca.js   | runtime              |   3.07 kB |                 1.44 kB

| Initial Total        |   2.15 MB |               451.73 kB

Lazy Chunk Files              | Names                |  Raw Size | Estimated Transfer Size
281.c3fb2a50e89270e5.js       | firebase-compat-auth |  [19](https://github.com/nexpack/nexpack/actions/runs/5236035892/jobs/9453285312#step:11:20).74 kB |                 5.62 kB

Build at: [20](https://github.com/nexpack/nexpack/actions/runs/5236035892/jobs/9453285312#step:11:21)23-06-11T14:49:58.012Z - Hash: 550b76b0947a55[22](https://github.com/nexpack/nexpack/actions/runs/5236035892/jobs/9453285312#step:11:23) - Time: 93698ms

Notice the extra Lazy Chunk Files - I guess those aren't loaded properly.

Here is a screenshot of the error in sentry.io where I uploaded source maps to better understand it:

I just rolled back the dependency update, and it works perfectly fine again.

Do you have any suggestions on how to update the configuration to correctly load those chunk files?