CODEWITHSUNDEEP
angularfirebaseangularfire2
Sander
Sander

Reputation: 33

How to build angularfire2 for production

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?

Upvotes: 1

Views: 749

Answers (3)

Meliovation
Meliovation

Reputation: 360

To add to this issue that drove me nuts all day... I am using Angular 6 and the latest AngularFire2 with the proper imports according to the docs. However I imported firestore to get access to the writeBatch class. I finally realized that I mistakenly used the wrong import which caused the firebase development SDK console warning.

So to import a class like writeBatch in typescript I had to change:

import { firestore } from 'firebase';

to:

import { firestore } from 'firebase/app';

That removed the warning. I don't think the documentation mentions why you would use 'firebase' instead of 'firebase/app' but it was not obvious to me the difference was development vs. production until I looked at the js package files. Hope this helps!

Upvotes: 3

Douglas P.
Douglas P.

Reputation: 560

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.

Upvotes: 3

Sander
Sander

Reputation: 33

Ok I think I figured it out. This works:

Add these imports:

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

And replace:

new auth.GithubAuthProvider()

with:

new firebase.auth.GithubAuthProvider()

Upvotes: 2

Related Questions