Angularfire: TypeError: __WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function

[xlxAciDxlx]

Version info

Angular: 1.7.0

Firebase: 5.0.2

AngularFire: 5.0.0-rc.8.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Node: 9.10.0

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

Errors in the JavaScript console

TypeError: __WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function

Output from firebase.database().enableLogging(true);

Screenshots

Expected behavior

FireStore should be utilizable from a component.

Actual behavior

Error in console, also a few errors on ng build --prod:

WARNING in ./node_modules/angularfire2/firebase.app.module.js
23:15-27 "export 'app' (imported as 'firebase') was not found in 'firebase/app'
WARNING in ./node_modules/angularfire2/firebase.app.module.js
13:19-41 "export 'initializeApp' (imported as 'firebase') was not found in 'firebase/app'

---

Not sure if it's part of the problem, but I'm running Angular inside of Electron. There are no errors in any of my TypeScript files, no development compile errors - only the error in the console and a few errors (as mentioned before) in ng build --prod

---

Also, sorry for the full error in the title.. I'm not good with naming

[herkulano]

I have a similar problem with ng serve

At build time:

WARNING in ./src/app/auth/services/auth.service.ts
25:47-54 "export 'auth' (imported as 'fb') was not found in 'firebase/app'

At runtime:

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Code:

new fb.auth.GoogleAuthProvider()

[herkulano]

The issue was in firebase import
This solves it: https://github.com/firebase/firebase-js-sdk/issues/820

[xlxAciDxlx]

So I'm assuming I should modify the AngularFire line that's erroring then? None of the errors pertain to my code.

Imports: (app.module.ts)

...
import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFirestoreModule } from 'angularfire2/firestore';
...

Firebase Initialization: (app.module.ts)

...
        AngularFireModule.initializeApp(FirebaseConfig),
        AngularFireAuthModule,
        AngularFireStorageModule,
        AngularFirestoreModule
...

Imports: (services.service.ts)

...
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
...

Usage: (services.service.ts)

...
    servicesCollection: AngularFirestoreCollection<Service>;
    services: Observable<Service[]>;
    itemDoc: AngularFirestoreDocument<Service>;

    constructor(private afs: AngularFirestore) {
        this.servicesCollection = this.afs.collection('services', ref => ref.orderBy('title', 'asc'));

        this.services = this.servicesCollection.snapshotChanges().map(changes => {
            return changes.map(a => {
                const data = a.payload.doc.data() as Service;
                data.id = a.payload.doc.id;
                return data;
            });
        });
    }
...

---

Unless some of that is incorrect, I can't see what I can change to fix the error.

[jamesdaniels]

@xlxAciDxlx maybe this is getting you, I have it in a PR right now https://github.com/angular/angularfire2/pull/1655/commits/f9a09648768aec78a7873f1101cd56f05feedae0

[ruandeveloper]

I'm also having the same problem. Any solution?

[xlxAciDxlx]

I'm also having the same problem. Any solution?

Phew, glad I'm not the only one. I followed numerous tutorials and they all led to the same result, this error. I manually tried @jamesdaniels proposed PR, but to no avail.

So at least from my side, I've not been able to find a solution, unfortunately. :/

[jamesdaniels]

Can you post the firebase parts of your package.json?

On Tue, May 15, 2018 at 5:09 PM AciD [e-mail] wrote:

I'm also having the same problem. Any solution?

Phew, glad I'm not the only one. I followed numerous tutorials and they
all led to the same result, this error. I manually tried @jamesdaniels
https://github.com/jamesdaniels proposed PR, but to no avail.

So at least from my side, I've not been able to find a solution,
unfortunately. :/

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/1647#issuecomment-389353569,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACvr1nGOV6YtBM1uQCwoC2VDcJjbXWTks5ty25SgaJpZM4T-fyC
.

[xlxAciDxlx]

    "dependencies": {
        "angular": "^1.7.0",
        "angularfire2": "^5.0.0-rc.8.0",
        "firebase": "^5.0.2",
    },

[jamesdaniels]

You'll want to transition over to using the new module style @firebase/app, @firebase/firestore, etc. Give those a shot and see if that helps.

[xlxAciDxlx]

So would I just use those in package.json, or in my actual component/service as well? If so, could you type up a quick example for me? Or even point me to documentation would work as well.

[jamesdaniels]

yeah, use those in your package.json; it should resolve the issue that you're experiencing

[xlxAciDxlx]

The same result, unfortunately.

package.json:

    "dependencies": {
        "@firebase/app": "^0.3.1",
        "@firebase/app-types": "^0.3.1",
        "@firebase/auth": "^0.5.2",
        "@firebase/auth-types": "^0.3.2",
        "@firebase/firestore": "^0.5.2",
        "@firebase/firestore-types": "^0.4.1",
        "@firebase/storage": "^0.2.2",
        "@firebase/storage-types": "^0.2.2",
        "angular": "^1.7.0",
        "angularfire2": "^5.0.0-rc.8.0",
...
        "firebase": "^5.0.2",
...
    },

---

I'll try clearing my node_modules directory and running npm i again.

[xlxAciDxlx]

Tried clearing out my node_modules directory, running npm i again, and still got the same result.

[jamesdaniels]

I'm not sure then, sounds like something up with your webpack. Firebase 5.0 (and late 4.x for that matter) did change a lot about how the modules are put together. If you're comfortable please share more information about your project, node_modules, and webpack config over email [email protected]

[JamesKnippel]

Hey y'all, I had a similar, if not exact problem throughout my updating journey today.
Notable error:
WARNING in ./src/app/core/auth.service.ts 35:27-40 "export 'auth' (imported as 'firebase') was not found in 'firebase/app'

It took me a little bit, but I went all in to fix this experimenting with the link @herkulano provided.

1. If you're updating to the newest angularfire2, make sure to update your angular to 6.0 as well as rxjs5 to rxjs6.

2. You can find instructions at: https://update.angular.io/ (I updated from 5.2 to 6.0.1)

3. I followed the instructions at update.angular.io with some additional tweaks to rxjs to fix errors at compile time.

4. I refactored .map(code) into .pipe(map(code))

5. and refactored any return Observable.of(code) into their new separate functions return of(code)
   -https://www.academind.com/learn/javascript/rxjs-6-what-changed/ great link to explain all the changes to rxjs which will affect angularfire and firebase updating.

6. Then I refactored my import statement to utilize the new @firebase style.

• before: import * as firebase from 'firebase/app';
• after: import firebase from '@firebase/app';

Now it works without error!

[xlxAciDxlx]

Thanks @JamesKnippel - I'll give that a shot now!

[jamesdaniels]

Also I'd suggest dropping the firebase dep entriely and just using the @firebase/* modules. In RC.9 I made sure this is no longer a peer dep.

Going to close for now. If you have a solid repro after taking all these steps please open a new issue.

Feel free to continue discussing here.

[herkulano]

@jamesdaniels could you clarify which dependencies are needed beyond npm install firebase angularfire2 --save because following the instructions here https://github.com/angular/angularfire2#install and importing like it's described here https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md doesn't work.

StackBlitz with the issue:
https://stackblitz.com/edit/angular-firebase-import-issue?file=app/app.component.ts

Error in const provider = new firebase.auth.GoogleAuthProvider():
Property 'auth' does not exist on type 'FirebaseNamespace'.

[herkulano]

This might be related: https://github.com/firebase/firebase-js-sdk/issues/818