CODEWITHSUNDEEP
firebaseangular5angularfire
Pooja Pradhan
Pooja Pradhan

Reputation: 83

Firebase JS SDK warning while load application in browser (angular v5)

When application load in browser, it gives following warning. So unable to create build for prod (ng build --aot --prod)

    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>';

I am using following configurations

Angular CLI: 1.5.0
Node: 9.8.0
Angular: 5.1.3

"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.10"

Please guide where I get wrong.

Upvotes: 7

Views: 4296

Answers (3)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

You did not share your Angular component code that's why I could not give you specific code. However, I guess, you include Firebase directly like this then it will show following warning.

import * as firebase from 'firebase';     // It will throw warning    
import * as firebase from 'firebase/app'; // It will not throw any warning

Then include specific package acccording to your need.

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

Upvotes: 3

Renaud Tarnec
Renaud Tarnec

Reputation: 83163

There is nothing really wrong, it is more a warning and a best practices tip.

Firebase is composed of different services/modules, e.g. the Real Time Database, Firestore, the Auth service, etc.

In the majority of projects one does not use ALL those services and therefore this warning indicates that instead of importing all the services with one global import it is better to only import the services you really need in your application. In such a way, your build will be optimized: the resulting build file(s) will only contain the Firebase SDK code that you need and will not contain the parts that are not used.

See this documentation item: https://firebase.google.com/docs/web/setup and in particular the part that says:

If you are using a bundler like Browserify or webpack, you can just require() the components that you use.

Update following your comment:

With the import keyword, you should do as follows:

import messaging from 'firebase/messaging';

Upvotes: 3

Pooja Pradhan
Pooja Pradhan

Reputation: 83

I add following code, it works for me

require("firebase/messaging");

Upvotes: 0

Related Questions