Unable to import Firebase-CodePudding

I'm having trouble configuring my Angular app to connect to firebase. I've created a project on Firebase and added my app to it.

Here's my code;

app.module.ts

import { initializeApp } from '@angular/fire/app';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

@NgModule({

imports: [
    BrowserModule,
    AppRoutingModule,
    NgxPaginationModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

For some reason, the "AngularFireModule" is not recognized and as a result, all of my Imports reflect an error. The import itself up top is not displaying any errors. I'm unsure why this error is popping up so any advice in resolving this would be greatly appreciated.

CodePudding user response：

Maybe you need to try in this way:

ng add @angular/fire

Try to read it

CodePudding user response：

Recently (end of 2021) there were major releases with breaking changes for v9 of firebase package and v7 of @angular/fire which introduced new modular SDK. This update should reduce the bundle size and increase bundle speed.

Modular SDK

In order to better support the tree-shakability introduced in Firebase v9 & to reduce the maintence required when the JS SDK adds new configuration flags, AngularFire providers now take a factory for a fully instantiated instance of the SDK you'd like to inject.

With old SDK
@NgModule({
    imports: [
        AngularFireModule.initializeApp(config),
        AngularFirestoreModule.enablePersistence(),
        AngularFireStorageModule,
    ],
    providers: [
        { provide: USE_EMULATOR, useValue: ['localhost', 8080] },
    ],
})
With new SDK
@NgModule({
    imports: [
        provideFirebaseApp(() => initializeApp(config)),
        provideFirestore(() => {
            const firestore = getFirestore();
            connectFirestoreEmulator(firestore, 'localhost', 8080);
            enableIndexedDbPersistence(firestore);
            return firestore;
        }),
        provideStorage(() => getStorage()),
    ],
})

Compatibility mode

AngularFire v7.0 has a compatibility layer that supports the AngularFire v6.0 API. Just change your imports from @angular/fire/* to @angular/fire/compat/* and firebase/* to firebase/compat/*.

While not as tree-shakable as the new modular SDK, this allows you to upgrade and take advantage of the benefits of the new SDK ASAP.

How to upgrade

Here you can check what changed in AngularFire v7

Here you can check what changed in Firebase v9