Please update the Documents ASAP , I'm not able to understand the new way properly

[RDJ2000]

Version info

Angular: 13.00

Firebase: "firebase": "^9.6.1", AngularFire: "@angular/fire": "^7.2.0", Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

Errors in the JavaScript console

Output from firebase.database().enableLogging(true);

Screenshots

Expected behavior

Actual behavior

[lazmeister]

Agreed, The documentation is definitely old, just tried to look at Auth Guard docs and are all on v6

[pradt]

There's not many documentation by third party sites, and the sample is really light for the changes (especially since I can no longer rely on intellisense).

[Sapython]

Here guys see this it has all the basic code snippets for V9

https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0

[Sapython]

And I know most of the syntax now so you can ask me specifically

1. Firestore
2. Storage
3. Authentication
4. Cloud Messaging
5. Remote Config

I can help you with these topics.

[lazmeister]

@Sapython Thanks for the link! Could you push PR's here with the updated documentation? [Update] Just saw one of your PRs, Thanks!

[Sapython]

That PR #3174 does not solve this firestore problem. But tomorrow I will publish the firestore documentation I will attach it to this.

[lazmeister]

@Sapython It' a start!

[Sapython]

Just added the firestore collection docs. Check here #3174

[Sapython]

Just added the firestore document docs. Check here #3174

[whoiscarlo]

Currently the documentation shows two different ways of initialize Firebase, Cloud Functions, etc

There's this way that in the main page: https://github.com/angular/angularfire

app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

And then this way in all of the examples: https://github.com/angular/angularfire/blob/master/docs/functions/functions.md

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Performance Monitoring: https://github.com/angular/angularfire/blob/master/docs/performance/getting-started.md

app.module.ts

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/compat/performance';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirePerformanceModule,
    ...
  ],
  providers: [
    PerformanceMonitoringService
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Which way is correct? And if the way we initialize has now been changed, what other changes are there?

[Sapython]

The one with initializeApp() is correct because it is the modular way.

[matus-m]

The current state of this library and the documentation is really annoying:

The angular schematic - which is the recommended and most common way to add this to angular projects - will setup everything for the new modular API. However the maintainers themselves say that the modular API is work in progress and that I quote:

This developer guide assumes you're using the Compatibility API (@angular/fire/compat/*).

Even If we would like to use the new module API, it is clearly unfinished ; e.g. addDoc still uses promises instead of observables....

The fact, that the new API in this library uses 1:1 the same functions as upstream firebase JS sdk makes it error prone for imports (e.g. intellisense for importing collection will offer both import from firebase/firestore and @angular/fire/firestore) which is honestly a bit confusing for newbies.

Also, how should we work with custom document data types? As none of the new collection/document methods are generic, do we really need to specify custom converter for each collection? That is super annoying, compared to the compat way of just: this.afs.collection<Student>('students');

In order to use the compat API, you need to undo the changes done by the schematic, to import the regular Angular modules from the compat package, which is not mentioned anywhere.

Is there any high level project plan, when is both the migration of all APIs to RxJS and update of all documentation going to be finished?

I understand that the main audience for Firebase are the mobile app developers, but one does not expect this kind of issues and friction when integrating a product from Google.

[spicemix]

The thing that bothers me the most is the boldfaced line:

"Most developers can stop here for now as the new API isn't feature complete."

In the version 7 upgrade doc.

It makes me think I should stick on /compat, which I have, but it's broken in 9.9.2, so I'm thinking I should finally upgrade to the shakable API, but this...line...says....

[spicemix]

Anyway as a personal update and morale builder I did succeed in porting over to the v9 SDK. Zero /compat left in my project.

This article was useful.

Another thing to know is that parts of rxfire are brought into angularfire to provide observables for some things, things where using of or from wouldn't cut it.

I had to spend some time just navigating the .d.ts files to see what was available. But everything worked OK in the end.

[DamianRuczynski]

Hi @Sapython, would you like to prepare dosc for angular fire messaging for angular fire 7+ and firebase 9+, because there are no updated documentation for messaging?

[Sapython]

The docs for Firebase messaging are available at https://firebase.google.com/docs/cloud-messaging/js/client