AngularFire - New Provider Syntax-CodePudding

What is the purpose of these providers, that the @angular/fire package add on ng add in the app.module.ts imports:

    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    providePerformance(() => getPerformance()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage()),

What function do they provide? I still need to import the AngularFirestoreModule when I want to use the Dependency Injection for AngularFirestore to not receive a NullInjectorError on it.

Can I just remove them without issue? Why would I keep these imports?

CodePudding user response：

AngularFire 7 came with a new modular SDK in addition to the existing one which is now exported via the compat import paths.

The ng add schematic adds the module imports for the new SDK. When you use the new SDK module imports, you need to inject different classes to your components, services for it to work (as already mentioned in the comments). Check out the the samples folder for the modular SDK in the AngularFire repo for code examples.

The docs pages in the AngularFire repo are not yet updated with the new modular SDK. There is a PR open for the new docs with some changes already to the docs pages. You could check out that branch as well.

To answer your questions:

Can I just remove them without issue?

If you want to keep using the old SDK (via the compat imports), then yes. Note, that AFAIK appCheck is not available in the old SDK.

What function do they provide? Why would I keep these imports?

You need them, if you want to use the new modular SDK, which uses the tree-shakable Firebase JS SDK under the hood.