There were several changes introduced as part of the May 2017 Release Candidate (RC) in 4.0.0-rc.0 designed to improve the speed and performance of AngularFire that change how you use it.
What Happened? AngularFire split into Feature Modules
Before the RC, AngularFire came as a single module with all of the features combined into a single library. This meant that you had to pay the performance and bundle size cost regardless of which Firebase features you were using.Step 1: Update You Dependencies
You will want to update to the latest version ofangularfire2
and of firebase
. This is pretty straightforward whether you are using npm or yarn. Here's the yarn command:yarn add angularfire2@latest firebase@latest
Step 2: Update your NgModule
We need to update the way we import AngularFire and add the module for Database and the module for Auth as well. If you used your NgModule to preconfigure authentication methods & providers, you can't do this anymore. These are now just passed in with your login method.Before:
import { AngularFireModule } from 'angularfire2';
...
imports: [
...
AngularFireModule.initializeApp( FIREBASE_CONFIG_OBJECT),
]
After:
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
...
imports: [
...
AngularFireModule.initializeApp( FIREBASE_CONFIG_OBJECT),
AngularFireDatabaseModule,
AngularFireAuthModule,
]
Step 3: Update your Services
Anywhere you injectedAngularFire
, you now want to inject AngularFireDatabase
or AngularFireAuth
as needed.constructor(af: AngularFire) { data = af.db.get('/path') }
becomes constructor(db: AngularFireDatabase) { data = db.get('/path') }
and
constructor(af: AngularFire) { user = af.auth; }
becomes constructor(auth: AngularFireAuth} { user = auth.authState; }
Any imports for
FirebaseListObservable
or FirebaseObjectObservable
have also been moved to angularfire2/database
.Step 4: Update your auth method calls
Almost everything is the same when it comes to Database access and usage, but a couple of the auth methods have changed.Before:
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
});
After:
import * as firebase from 'firebase/app';
...
this.auth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());