Blog
Contact

AngularFire2 5.0.0-rc.6 Released

Michael Prentice
Jan 28, 2018

AngularFire2 has released 5.0.0-rc.6 for apps built with Angular.

This release brings support for the typing changes in Firebase JS SDK 4.8.1+ and much awaited support for Firebase Cloud Storage!

Firebase Cloud Storage Icon

Many thanks to @_davideast, @jamesuriah, and a number of community contributors for helping get this update out!

AngularFire2 5.0.0-rc.6 Changelog

Full changelog here.

Troubleshooting

If you run into an issue using Phone Auth due to the types of firebase.app.App and FirebaseApp no longer agreeing like this:

ERROR in src/app/auth/auth.component.ts(67,5): error TS2345: Argument of type 'FirebaseApp' is not assignable to parameter of type 'App'.
  Types of property 'auth' are incompatible.
    Type '() => FirebaseAuth' is not assignable to type '() => Auth'.
      Type 'FirebaseAuth' is not assignable to type 'Auth'.
        Types of property 'app' are incompatible.
          Type 'FirebaseApp' is not assignable to type 'App'.
            Types of property 'auth' are incompatible.
              Type '() => FirebaseAuth' is not assignable to type '() => Auth'.
                Type 'FirebaseAuth' is not assignable to type 'Auth'.

Then you can solve the issue by the following steps

Add the new @firebase packages to your package.json:

"@firebase/app": "0.1.7",
"@firebase/auth": "0.3.2",

Change your firebase import

import * as firebase from 'firebase/app';

to use the new format (with the default export syntax)

import firebase from '@firebase/app';

This may then spit out the following error

error TS2503: Cannot find namespace 'firebase'.

For me, this was caused by setting the following type

phoneRecaptchaVerifier: firebase.auth.RecaptchaVerifier;

You can solve this by using the new @firebase/auth-types package

import { RecaptchaVerifier } from '@firebase/auth-types';

Then just remove the firebase.auth. so that you have the cleaner version

phoneRecaptchaVerifier: RecaptchaVerifier;

Note: when calling a constructor like new firebase.auth.RecaptchaVerifier(), you’ll still need the firebase.auth. prefix.

Michael Prentice
Jan 28, 2018