DEV Community

Angular 12 with Firebase 9

Jonathan Gamble on September 06, 2021

Update 3/7/24 For a modern Angular Firebase App, see my latest post: https://code.build/p/angular-todo-app-with-firebase-fmLJ37 ...

Read full post

Joel • Jan 27 '22 • Edited

Type casting is not working here:

docSnapshots<Post>(
  doc(this.afs, `posts/${id}`)
);

Argument of type 'DocumentReference<DocumentData>' is not assignable to parameter of type 'DocumentReference<Post>'.
  The types returned by 'converter.fromFirestore(...)' are incompatible between these types.
    Type 'DocumentData' is not assignable to type 'Post'.ts(2345)

Jonathan Gamble • Jan 27 '22 • Edited

Yes, Angular Firebase is definitely not perfected code with Firebase 9. You can get around that with:

docSnapshots<Post>(
  doc(this.afs, `posts/${id}`) as DocumentReference<Post>
);

Frédéric Lemaitre • Jul 31

hello, I'm facing an error with firebase auth / angular. I well configure my Angular app module with provideAuth(() => getAuth()) under providers sections but even when including no code related to Auth inside my app, I get SyntaxError: Unexpected number in JSON at position 2 (line 1 column 3) related with file _/scs/abc-static/_/js/k=gapi.lb.fr.MtA0XocprA0.O/m=gapi_iframes/rt=j/sv=1/d=1/ed=1/am=AAAg/rs=AHpOoo90Qw_OxY6asHlYoeK8rr6SbH-ghg

firebase did work with firestore provideFirestore(() => getFirestore()) but not with Auth.

I don't know at all what to do since I execute no code yet linked with auth inside my components...

Can someone help?

Ana Paula Lopes • Apr 1 • Edited

Help... :(

   provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),

bim.component.html:85 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
    at getApp (index.esm2017.js:479:29)
    at getStorage (index.esm2017.js:3558:33)
    at BimService.downloadAttachment (bim.service.ts:14:31)
    at BimComponent.getDownload_BT50 (bim.component.ts:21:18)
    at BimComponent_Template_a_click_56_listener (bim.component.html:85:36)
    at executeListenerWithErrorHandling (core.mjs:16795:16)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:16828:22)
    at HTMLAnchorElement.<anonymous> (platform-browser.mjs:665:17)
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10757:55

Jonathan Gamble • Apr 2

Read my updated article on this - this article is out-of-date - code.build/p/angular-todo-app-with... - make sure you're using importProvidersFrom()

Andrew MacFarlane • Dec 19 '21

I have been scouring the internet for 24 hours looking for an example of how to implement the new AngularFire Auth API!! thank you!!!

Michael Peake • Oct 23 '21

Thank you. This has been very useful today. I'm starting a new project and want to use the new APIs but the lack of documentation is infuriating.

Alsmith141510 • Jun 19 '22

HI: This code doesn't work with 7.4.1 and angular 14.
this.user$ = user(auth).pipe(
switchMap((user: User | null) =>
user
? docData(doc(this.afs, 'users', user.uid))
as Observable
: of(null)
)
);

Patrick Simonski • Jan 16 '22

Thanks so much for this! You wrote "I may update this with more items..." and I cant' wait. We need articles like this, bc the official @angular/angularfire documentation is awful.