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

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.

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

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

I add following code, it works for me
require("firebase/messaging");

Related

How to fix Firebase warning "you're using the development build of the Firebase"

I found several answers here about how to fix this warning in my Vue app, but even when I follow the standard advice given I still get the warning. Here's how I import Firebase:
import firebase from 'firebase/app';
import 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Any idea?
The warning about a development build is logged when you're using firebase.js, which includes the SDKs for all Firebase products in a single file.
If you're still getting that warning, you're very likely still using firebase.js in one of your files, or in a build artifact.

firebase importing just the required packages

I am using firebase within my Angular 6 application and when I use imports like the following,
import { auth, User } from 'firebase';
I get this warning in the browser 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>';
Whenever I switch the imports to something like import * as auth from 'firebase/auth':
I get a different error: export 'GoogleAuthProvider' (imported as 'auth') was not found in 'firebase/auth' (because I am also using GoogleAuthProvider)
the auth variable doesn't have it's definition anymore and I can't CTRL-CLICK and see what is going on.
According to danfri86's comment to this GitHub issue - https://github.com/firebase/angularfire/issues/968 - you should do the following:
import firebase from 'firebase/app';
import 'firebase/auth'; // This line is important
export const googleProvider = new firebase.auth.GoogleAuthProvider();
This is in fact what the warning says to do:
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
I've just tested it and it doesn't throw any errors.

Firebase is not Importing without cocoapods in Xcode

I am new at Swift. I am creating my own framework that will use Firebase for in-app messages.
I tried to install Firebase through Cocoa pods, but it has issues: when I do that for my framework, then for sample project I have to install Firebase again. And then I get the numbers of warnings like this:
Class Firebase is implemented in both /private/var/containers/Bundle/Application/AD85D7EC-2652-4019-94FB-C799D0FBA69B/MyFrameworkExampleApp.app/Frameworks/MyFramework.framework/MyFramework (0x1019a0438) and /var/containers/Bundle/Application/AD85D7EC-2652-4019-94FB-C799D0FBA69B/MyFrameworkExampleApp.app/MyFrameworkExampleApp (0x10107c558). One of the two will be used. Which one is undefined.
my app crashes at runtime due to these warnings
So I don't want to use cocoa pods in Framework but need Firebase in my project.)
.
I follow the steps:
"https://firebase.google.com/docs/ios/setup#frameworks"
I just download the firebase file and import it into my project. after this I try to:
import Firebase
at the top of my swift class but the compiler is giving me an error.
No such module 'Firebase'
I am using Xcode 9. swift 4.
All of the framework files are in
"Targets > FrameworkName > General > Linked Frameworkd and Libraries".
also in the
"Targets > FrameworkName > Build Phases > Link Binary with Libraries".
I also followed this tutorial:
http://www.mokacoding.com/blog/setting-up-firebase-without-cocoapods/
but nothing happened.
Where am I wrong and What should I do?
Try adding following #import to framework's public header file "YourCocoaTouchFrameworkNameSwift.h"
#import <YourCocoaTouchFrameworkName/Firebase.h>
Check this link, if you need more information.
in firebase we have not a .framework file for import firebase. As we know that firebase is a combination of different frameworks, so we were unable to import firebase directly. thats why we
import required framework and dependent framework separately.
Dont try to import whole firebase.

Firebase 2 core module failing to import (web)

I'm trying to import the core module from firebase but it looks like something is wrong with what I''m doing. Currently I'm importing it as:
import firebase from 'firebase'
With this in my app I do not get the app interface, however, if I do:
import firebase from 'firebase/app'
It does work but I'm missing all the other modules as the database modules, I could by pass it just by adding a couple more of imports but I'd like to import the full app since it's a simpler implementation
Thanks for the help!
Try with:
import firebase from 'firebase/firebase-browser'

How to connect Aurelia to Firebase?

Is fbh-firebase-util compatible with aurelia?
How to use it?
fbh-firebase-util via jspm:
jspm install github:djindjic/fbh-firebase-util
Aurelia is just a javascript framework. Aurelia itself won't keep you from using the libraries you love. After installing a library with jspm, just import it and use it. The only trick is knowing what the library exports, but the library should provide you with some documentation.
In all likelihood, you will just need to add this line at the top of your code which uses firebase:
import firebase from 'github:djindjic/fbh-firebase-util'
If you add a dependency to your package.json
"jspm": {
"dependencies": {
"firebase": "github:djindjic/fbh-firebase-util#^0.1.22",
then your import line becomes
import firebase from 'firebase'
If this doesn't immediately work, please review the firebase documentation to see what the module exports. The above assumes it exports default.

Resources