app.auth is not a function

[rtm]

Version info

Angular: 6.0.0

Firebase: 5.0.4

AngularFire: 5.0.0-rc.10

Other (e.g. Ionic/Cordova, Node, browser, operating system): WSL, Node 8.11.2, Cordova, etc.

I receive the message:

app.auth is not a function

This occurs in the following code on the line return app.auth():

var AngularFireAuth = (function () {
  function AngularFireAuth(options, nameOrConfig, platformId, zone) {
    var _this = this;
    this.zone = zone;
    var scheduler = new angularfire2__WEBPACK_IMPORTED_MODULE_3__["FirebaseZoneScheduler"](zone, platformId);
    this.auth = zone.runOutsideAngular(function () {
        var app = Object(angularfire2__WEBPACK_IMPORTED_MODULE_3__["_firebaseAppFactory"])(options, nameOrConfig);
        return app.auth();
    });

app seems to be well-formed:

but it has no auth property. I am instantiating (or rather, Angular is instantiating) AngularFireAuth because it is injected into a service, which itself is instantiated quite early in the application life cycle. Was there some change in how soon the app is completely ready, including its auth property? Or is this possibly some kind of version conflict?

[MartinNuc]

Finally I got rid of that thing. I am not exactly sure what was the cause but after upgrading to new angularfire2 I had some problems with imports and I googled to install some packages from @firebase/... and also firebase-util but after that I got app.auth() is not a function.

Today I removed those dependencies. So related things in my package.json are:

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

but then I got error: Module not found: Error: Can't resolve '@firebase/webchannel-wrapper'

So I installed only that webchannel-wrapper: npm install @firebase/webchannel-wrapper --save-dev

Remember to remove your node_modules and redoing npm install just to be sure.

In my code when I need something from firebase I use this kind of import:

import { auth } from 'firebase/app';
import { FirebaseError } from 'firebase/app';

Hope it helps :-/

[mohamedshameer]

@MartinNuc which version of firebase/app are you using

[MartinNuc]

firebase: 5.0.4
angularfire2: 5.0.0-rc.10
angular: 6.0.4

[hiepxanh]

version conflict was resolved with firebase@5.1.0 and angularfire2 rc 11. Do you still have problem?

[mohamedshameer]

Thanks @hiepxanh its working fine now .

[hiepxanh]

@mohamedshameer moha good to know that!
@rtm do you still have that problem?

[ziyaddin]

@hiepxanh unfortunately, your version suggestion did not work. I personally use angularfire2@5.0.0-rc.3 and firebase@4.8.0 and it works fine with Angular 6.x. You can use it as an alternative.

[Qarun-Qadir-Bissoondial]

@MartinNuc When you imported auth from firebase/app, can you provide some code as to how you used the import?

[ValentinFunk]

For me in my bundle there were somehow two versions of @firebase/app:

/node_modules/@firebase/app/dist/index.esm.js?89c8 
/node_modules/@firebase/app/dist/index.esm.js?cc84

to workaround this i added a plugin in my webpack config:

new NormalModuleReplacementPlugin(/\@firebase\/app(.*)/, require.resolve('@firebase/app').replace('index.node.cjs.js', 'index.esm.js'))

That fixed it for me. Versions:

"angularfire2": "5.0.0-rc.9",
"firebase": "5.3.0",

[ValentinFunk]

That doesn't work for prod though 😢

[davideast]

@kamshak What do you imports of Firebase look like?

[ValentinFunk]

@davideast

Imports are done the normal way through AngularFire*Module imports and in one case I import auth like this to create auth providers:

import { auth, User as FirebaseUser } from 'firebase/app';
// some code
const provider = new auth.GoogleAuthProvider();

[davideast]

@kamshak For TypeScript you should use the star import so nothing funky occurs.

import * as firebase from 'firebase/app';

Can you give that a try to and see if it helps? Firebase isn't packaged for single exports like you're using and that may be causing problems.