Closed alexfung888 closed 3 years ago
Would like to see this fixed as well, for people who are looking for a solution until this is changed read the following: https://angular.io/guide/build#configuring-commonjs-dependencies
I notice that with angular/fire@6, angularfiremodule.auth no longer exists, but angularfiremodule.app.auth() method is present (actually .app is a promise so the code is more complicated). However, this still does not provide access to GoogleAuthProvider()
required for login request because we need to get a firebase.auth.GoogleAuthProvider()
instead of a firebase.auth().GoogleAuthProvider()
.
@alexfung888 Tbh I think you would get this warning even if the auth module is rexported. The angular compiler prints that warning for any dependency, even transitive dependencies, that use commonjs modules and must be included in your bundle. The only real solution is for the firebase team to rebuild the firebase sdk to use es modules instead of commonjs.
This becomes more cumbersome with Firebase 8 right ?
This becomes more cumbersome with Firebase 8 right ?
Actually I have figured out how to do it in firebase@8. And it doesn't receive any angular warnings.
import firebase from 'firebase';
const p = new firebase.auth.GoogleAuthProvider();
I don't really understand the various syntax of the import statement, or whether this import and loading a lot of useless stuff into my module. At least this is a working version.
I would feel much beter if I can import things like auth, User, FirebaseError from angular/fire instead of from firebase, because tha latter is completely undocumented as far as Typescript is concerned.
@alexfung888 you should import from firebase/app
to make it so you're only importing what you need to.
import firebase from 'firebase/app'; // CHANGE TO FIREBASE/APP
const p = new firebase.auth.GoogleAuthProvider();
The change with v8 is Firebase is now exporting a "default export" rather than a namespace, I know it's weird but you can't destructure a module in ES5/6/7 as it conflicts with the namespace syntax. Supporting both namespaces + defaults are coming to modules in ES2020(E11) apparently but we're not targeting that high ATM.
firebase/app
is just the base of the library, whereas firebase
includes the kitchen sink. The Firebase object currently gets the methods auth
, firestore
, etc. added to it's prototype when you import 'firebase/auth'
etc.
Looking to the future we're working on a modular version of the JS SDK, I'll be starting an experimental branch of AngularFire to support this soon.
I can't reexport firebase.auth
etc. until the next minor at least, I'm still not sure what I want to do for an API there...
This problem also is going away with the aforementioned modular JS SDK.
@jamesdaniels that way we get the warning about development environment.
You need to
import firebase from 'firebase/app';
import 'firebase/auth';
And later
new firebase.auth()
etc
I'm thinking about a new API here but I ran out of steam on 6.1, honestly I think Firebase vNext is going to be the big next target for AngularFire and it won't have these problems. Going to close.
Version info
Angular: 10.0.1 Firebase: 7.15.5 AngularFire: 6.0.2
How to reproduce these conditions
import { auth } from 'firebase/app';
AngularFireAuth promise proxies an initialized
firebase.auth.Auth
, however, angular/fire does not re-exportfirebase.auth
itself As a result, programs do not have access to auth unless it directly imports from firebase/app resuling in angular 10 warningFor example, to use angular/fire
.signInWithRedirect()
, you need an AuthProvider. To create one, you need something likeangular/fire should re-export firebase.auth, or at least all the authprovider constants/functions available, so that programs would not need to import from firebase.