How to build angularfire2 for production

Question

After running a production build of my Angular app that is using AngularFire2, I still see the following warning in the console:

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

The only place in my app where I'm directly importing from firebase is here:

import { auth } from 'firebase';

...

constructor(private afAuth: AngularFireAuth) {}

...

login() {
 this.afAuth.auth.signInWithPopup(new auth.GithubAuthProvider())
 .then(result => {
   console.log('sign in result', result);
 })
 .catch(e => console.error('error signing in'));
}

All other firebase related code in my project is imported from angularfire2. I tried importing auth as suggested like this:

import firebase from 'firebase/app';
import 'firebase/auth';

But that doesn't work. What am I doing wrong?

Answer 1

You have to import the firebase app

import * as firebase from 'firebase/app';

And any other firebase services you are using in your application

import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import 'firebase/messaging';
import 'firebase/functions';

Check out the official firebase documentation here.