How to use Firebase 9 in latest Angular

Question

I am looking for a source on how to initialize firebase 9 in a brand new angular app. I've followed the beta firebase instructions, but when it comes to the initializeApp step, I don't know how to include this into my app.module.ts.

Normally, you would npm install @angular/fire but when installing, I get an error that basically shows @angular/fire requires firebase 7-8. 9 is already installed, so it won't install angular fire.

I'm unsure what to import from the @firebase package which will allow me to initializeApp with my environment details.

Any help would be great, thank you!

EDIT: Package.json

{
"name": "PROmpt",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/common": "~11.2.0",
  "@angular/core": "~11.2.0",
  "@angular/forms": "~11.2.0",
  "@angular/platform-browser": "~11.2.0",
  "@angular/platform-browser-dynamic": "~11.2.0",
  "@angular/router": "~11.2.0",
  "@capacitor/core": "2.4.7",
  "@ionic/angular": "^5.5.2",
  "firebase": "^9.0.0-beta.1",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1102.4",
  "@angular-eslint/builder": "2.0.2",
  "@angular-eslint/eslint-plugin": "2.0.2",
  "@angular-eslint/eslint-plugin-template": "2.0.2",
  "@angular-eslint/template-parser": "2.0.2",
  "@angular/cli": "~11.2.4",
  "@angular/compiler": "~11.2.0",
  "@angular/compiler-cli": "~11.2.0",
  "@angular/language-service": "~11.2.0",
  "@capacitor/cli": "2.4.7",
  "@ionic/angular-toolkit": "^3.1.1",
  "@types/jasmine": "~3.6.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
  "@typescript-eslint/eslint-plugin": "4.16.1",
  "@typescript-eslint/parser": "4.16.1",
  "eslint": "^7.6.0",
  "eslint-plugin-import": "2.22.1",
  "eslint-plugin-jsdoc": "30.7.6",
  "eslint-plugin-prefer-arrow": "1.2.2",
  "jasmine-core": "~3.6.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.2.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.0.3",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "typescript": "~4.0.2"
},
"description": "An Ionic project"
}

Answer 1

Take a look at https://github.com/angular/angularfire/blob/master/samples/modular/src/app/app.module.ts

I made some adjustments to my usage.

   ...
    import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
    import { environment } from '../environments/environment';

    import { getDatabase, provideDatabase } from '@angular/fire/database';
    import { getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
    import { getStorage, provideStorage } from '@angular/fire/storage';
    import { getAuth, provideAuth } from '@angular/fire/auth';
    import { FunctionsModule, getFunctions, provideFunctions } from '@angular/fire/functions';

    // import { getMessaging, provideMessaging } from '@angular/fire/messaging';
    // import { getRemoteConfig, provideRemoteConfig } from '@angular/fire/remote-config';
    // import { getAnalytics, provideAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
    // import { ServiceWorkerModule } from '@angular/service-worker';

    let resolvePersistenceEnabled: (enabled: boolean) => void;

    export const persistenceEnabled = new Promise<boolean>(resolve => {
      resolvePersistenceEnabled = resolve;
    });

    ...
    @NgModule({
      ...
      imports: [
        ...
        provideFirebaseApp(() => initializeApp(environment.firebase)),

        provideDatabase(() => {
          const database = getDatabase();
          return database;
        }),

        provideFirestore(() => {
          const firestore = getFirestore();
          enableMultiTabIndexedDbPersistence(firestore).then(
            () => resolvePersistenceEnabled(true),
            () => resolvePersistenceEnabled(false)
          );
          return firestore;
        }),

        provideStorage(() => {
          const storage = getStorage();
          return storage;
        }),

        provideAuth(() => {
          const auth = getAuth();
          return auth;
        }),

        FunctionsModule,
        provideFunctions(() => {
          const functions = getFunctions();
          return functions;
        }),

        // provideMessaging(() => getMessaging()),
        // provideRemoteConfig(() => getRemoteConfig()),
        // provideAnalytics(() => getAnalytics()),
        // ServiceWorkerModule.register('ngsw-worker.js', {
        //   enabled: environment.production,
        //   registrationStrategy: 'registerWhenStable:30000'
        // }),

        ...
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    ...

Hope it helps ;)

Edited: I found here a better example https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0

Answer 2

Based on the docs here Firebase is not yet supported. as I have read Firebase 9 will support modular import which I think is not yet supported in angular/fire yet.
So, there is no way to get them work together.

Also, check this link talking about v9 of firebase