Documentation for @angular/fire v6 seems outdated or even more breaking changes

[paulstelzer]

Version info

Angular: 9.0.0-rc.13

Firebase: 7.8.0

AngularFire: 6.0.0-rc.0

How to reproduce these conditions

I have updated from @angular/fire 5 to 6 and adjusted my application like mentioned in https://github.com/angular/angularfire/blob/master/CHANGELOG.md

But it seems that @angular/fire/auth has even more breaking changes like mentioned. The documentation is the same for v6 like for v5 (https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md)

The example in documentation still says:

  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }

But then it says: Property 'auth' does not exist on type 'AngularFireAuth'.

And it's right -> auth isn't anymore in https://github.com/angular/angularfire/blob/master/src/auth/auth.ts

You only return the auth (return ɵlazySDKProxy(this, auth, zone);)

So is it correct to write this.afAuth.signOut(); ?

But then everything is a promise. In v5 I could write: "const current = this.afAuth.auth.currentUser;", but in v6 it's a promise -> "const current = await this.afAuth.auth.currentUser"

[jimmykane]

Came here questioning for this, but also read the big warning (after searching for this).

Didn't know the RC was on master and didn't expect this. But well.

I have done exactly what you did to make the app compile after thinking that I had to import some other auth module.

[jimmykane]

I am getting

You must import 'firebase/database' before using AngularFireDatabase
You must import 'firebase/firestore' before using AngularFireStore

This happens runtime

Why?

[paulstelzer]

I am getting

You must import 'firebase/database' before using AngularFireDatabase
You must import 'firebase/firestore' before using AngularFireStore

This happens runtime

Why?

WHat you describe is mentioned in the changelog ("AngularFirestoreModule no longer imports firebase/firestore on it's own to remain side-effect free, you'll need to import 'firebase/firestore' on your own")

[jimmykane]

Well I figured out why. I didn't use those modules eg database. But I had an unused import of storage and that made this runtime error. Why would this be a runtime error ? Sorry I don't understand it. So to repeat. It complained about the need to import database and Firestore as seen before without me using those at any place in my app. Only an unused import of storage. Why would storage need the import of db ? More over even importing those didn't solve the issue.

…

On Wed, 5 Feb 2020, 07:23 Paul Stelzer, ***@***.***> wrote: I am getting You must import 'firebase/database' before using AngularFireDatabase You must import 'firebase/firestore' before using AngularFireStore This happens runtime Why? WHat you describe is mentioned in the changelog ("AngularFirestoreModule no longer imports firebase/firestore on it's own to remain side-effect free, you'll need to import 'firebase/firestore' on your own") — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2310?email_source=notifications&email_token=AAJVX46J7XVGCL3NXWOAVADRBJLPRA5CNFSM4KPRMIQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK2JLBA#issuecomment-582260100>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJVX47GMQ2DXJFCGOS3SZDRBJLPRANCNFSM4KPRMIQQ> .

[jimmykane]

I am also having issues with the canActivate in my authGuard.

Looks like something is not triggering. Not sure how to debug this.....

[jimmykane]

@jamesdaniels I am sorry to say but this is really a mess. Please help us out.

The whole auth, authGuards, and custom pipes are not working. I am using the documentation from the master branch and cannot figure out anything.

[leon]

To make things "simpler" we don't have to keep jumping between the "real" firebase and angular fire.

Using proxy objects angular fire can extend the native firebase Auth object.

So before calling fbAuth.auth.signOut() will now become fbAuth.signOut()

And as they wrote, we need to import firebase/auth at the top of our app.module.ts so that the firebase libraries will be included.

My angular LoginService looks as follows now

import { Injectable } from '@angular/core'
import { AngularFireAuth } from '@angular/fire/auth'
import { auth } from 'firebase/app'

@Injectable()
export class LoginService {
  idToken$ = this.fbAuth.idTokenResult
  user$ = this.fbAuth.user

  constructor(private fbAuth: AngularFireAuth) { }

  async sendEmailLogin(email: string) {
    await this.fbAuth.sendSignInLinkToEmail(email, {
      url: 'http://localhost:4200/auth/login/verify',
      handleCodeInApp: true,
    })

    localStorage.setItem('emailForSignIn', email)
  }

  getVerifyEmail(): string | null {
    return localStorage.getItem('emailForSignIn')
  }

  async verifyEmailLogin(email): Promise<boolean> {
    if (this.fbAuth.isSignInWithEmailLink(location.href)) {
      const result = await this.fbAuth.signInWithEmailLink(email, location.href)
      window.localStorage.removeItem('emailForSignIn')
      return true
    }
    return false
  }

  loginWithGoogle() {
    const provider = new auth.GoogleAuthProvider()
    provider.addScope('profile')
    provider.addScope('email')
    this.fbAuth.useDeviceLanguage()
    this.fbAuth.signInWithRedirect(provider)
  }

  verifyGoogleLogin(): Promise<auth.UserCredential> {
    return this.fbAuth.getRedirectResult()
  }
}

[paulstelzer]

@leon I have updated my app, too and it's working. I only want to say that the documentation is not up to date and fire/auth has more breaking changes like mentioned in the changelog.

But I close this because I think with release of the new version the documentation will be updated

[jamesdaniels]

Yes, sorry for the mess. I've not updated the docs on master, incase people are still using stable.

Starting to get the docs caught up here https://github.com/angular/angularfire/tree/rc0_next I'd appreciate any feedback / PRs for v6 docs against this branch.

This is all valuable feedback thank you and why I released rc.0. Sorry to be experimenting on all of you, I'm rushing to support Angular 9 and I probably got a little over eager with the opportunity to pay off some SEMVER debt.

[Silvac34]

Hi !

Also getting an error with angularFireMessaging. This part of code in many tuto is obviously obsolete (this one for instance) :

  this.angularFireMessaging.messaging.subscribe(
    (_messaging) => {
      _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      _messaging.onMessage = _messaging.onMessage.bind(_messaging);
    }
  )

However, what sould be the replacement as "AngularFireMessaging has dropped the messaging property and instead Promise Proxies the underlying Firebase messaging.Messaging instance"

[alireza-saberi]

I am getting

You must import 'firebase/database' before using AngularFireDatabase
You must import 'firebase/firestore' before using AngularFireStore

This happens runtime
Why?

WHat you describe is mentioned in the changelog ("AngularFirestoreModule no longer imports firebase/firestore on it's own to remain side-effect free, you'll need to import 'firebase/firestore' on your own")

Hi;

from where?

[Akahadaka]

You must import 'firebase/database' before using AngularFireDatabase
You must import 'firebase/firestore' before using AngularFireStore

Hi;

from where?

@alireza-saberi This also got me. See example in the README:

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import 'firebase/firestore';
...

[Kushalbaldev]

Getting this error in angular latest version
This likely means that the library (@angular/fire/firestore) which declares AngularFirestore has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if
the library is expected to be compatible with Ivy.