Error: Uncaught (in promise): TypeError: Failed to resolve module specifier 'firebase/auth'

[SiddAjmera]

Version info

Angular:

9.1.0

Firebase:

7.13.2

AngularFire:

Tried with both 6.0.0 and 6.0.0-rc.2

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

I'm using this on StackBlitz.

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

https://stackblitz.com/edit/kittygram-oauth

Steps to set up and reproduce

Sample data and security rules

<-- include/attach/link to some json sample data (or provide credentials to a sanitized, test Firebase project) -->

Debug output

** Errors in the JavaScript console **

Error: Uncaught (in promise): TypeError: Failed to resolve module specifier 'firebase/auth'
TypeError: Failed to resolve module specifier 'firebase/auth'
at eval (https://kittygram-oauth.stackblitz.io/turbo_modules/@angular/fire@6.0.0/bundles/angular-fire-auth.umd.js:26:27)
at ZoneDelegate.invoke (https://kittygram-oauth.stackblitz.io/turbo_modules/zone.js@0.10.3/dist/zone.js:386:30)
at Zone.run (https://kittygram-oauth.stackblitz.io/turbo_modules/zone.js@0.10.3/dist/zone.js:143:47)
at NgZone.runOutsideAngular (https://kittygram-oauth.stackblitz.io/turbo_modules/@angular/core@9.1.0/bundles/core.umd.js:27926:32)
at SwitchMapSubscriber.eval [as project] (https://kittygram-oauth.stackblitz.io/turbo_modules/@angular/fire@6.0.0/bundles/angular-fire-auth.umd.js:23:39)
at SwitchMapSubscriber._next (https://kittygram-oauth.stackblitz.io/turbo_modules/rxjs@6.5.5/internal/operators/switchMap.js:49:27)
at SwitchMapSubscriber.Subscriber.next (https://kittygram-oauth.stackblitz.io/turbo_modules/rxjs@6.5.5/internal/Subscriber.js:66:18)
at Notification.observe (https://kittygram-oauth.stackblitz.io/turbo_modules/rxjs@6.5.5/internal/Notification.js:22:50)
at QueueAction.ObserveOnSubscriber.dispatch (https://kittygram-oauth.stackblitz.io/turbo_modules/rxjs@6.5.5/internal/operators/observeOn.js:48:22)
at eval (https://kittygram-oauth.stackblitz.io/turbo_modules/@angular/fire@6.0.0/bundles/angular-fire.umd.js:262:26)

Expected behavior

It should not ask to install @firebase/app

Actual behavior

It alerted saying that @firebase/app is not installed and prompted to install it. Once I did, I threw the error mentioned above when I tried to call this.afAuth.signInWithPopup(new auth.GoogleAuthProvider());

[jamesdaniels]

I've heard complaints with StackBlitz here, I'll be looking into that environment shortly.

[jamesdaniels]

Out of curiosity does it work if you short circuit lazy loading of the auth sdk?

Just import 'firebase/auth' yourself.

[SiddAjmera]

I'm actually doing that already in my auth.service.ts but doesn't help.

[wasun26]

try to use import firebase from 'firebase'; instead of @angular/fire/auth
look like new version of angular/fire/auth not match or support to current firebase version.
I use this import it work fine.

[Unkn0wn0x]

From your Stackblitz app-firebase.module.ts, try to import following dependencies:

import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFireModule } from "@angular/fire";
import { NgModule } from "@angular/core";
import 'firebase/auth';
// Additional imports for example ...
//import 'firebase/database'
//import 'firebase/storage';

import { environment } from "../environments/environment";

@NgModule({
  imports: [AngularFireModule.initializeApp(environment.firebase)],
  exports: [AngularFireAuthModule, AngularFireModule]
})
export class AppFirebaseModule {}

Please refer to the Changelog:

• https://github.com/angular/angularfire/blob/master/CHANGELOG.md#angularfireauth
  • AngularFireDatabaseModule no longer imports firebase/database on it's own to remain side-effect free, you'll need to import 'firebase/database' on your own
• https://github.com/angular/angularfire/blob/master/CHANGELOG.md#angularfireauth
  • AngularFireAuthModule is now side-effect free and AngularFireAuth will dynamically import firebase/auth when a request is made

Hope it helps.

Cheers
Unkn0wn0x

[weilies]

i hit the same error. anyone know what exact code changes to make it work again?

[arikanorh]

I am also having this problem. The code in docs doesnt work

[EricSimons]

Hey all- I think it's due to an import() call inside the UMD bundle, which should get converted to CJS require(). thread

@jamesdaniels is there a future release coming that would fix this? Can also try to get something implemented on our side as well.

Edit: This should now be working. Feel free to close if you're seeing the same on your end!

[arikanorh]

@EricSimons

I've just checked and this is still the case for me

You can check the project https://over-track.stackblitz.io/

[arikanorh]

@EricSimons This looks fixed now. I can sucesfully login with firebase auth now. Ty Eric

[weilies]

hi @arikanorh GREAT to hear that! could you share the working code to import firebase/auth?

Thanks!

[arikanorh]

Hello I've added following import to my app.module

import 'firebase/auth';
Then used FirebaseAuth just as documented

import { AngularFireAuth } from '@angular/fire/auth';
I'd like to share the source code but it has some private information sorry. I can helo you further if you have any problems

[weilies]

lol, i tried to build a POC by create new project in StackBlitz. But i think thing jz get little complicated as now all angular project defaulted with Ivy, and it compile differently using ngcc.

now i getting a different error.

Error in ~/src/main.ts
ngcc failed to run on @angular/fire@6.0.0.

then it refresh with another error

Error in turbo_modules/@angular/fire@6.0.0/auth/auth.d.ts (8:22)
Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the dependency (@angular/fire/auth) which declares AngularFireAuth has not been processed correctly by ngcc.

here my project: https://stackblitz.com/edit/angular-ivy-wemptx feel free to fork it.

[arikanorh]

Here is my working app. You can have a look at

https://stackblitz.com/edit/over-track

[weilies]

hi @arikanorh ! thanks for the GREAT reference.
Here my summary to use firebase auth v6.0.0, for the import to work for me

app.module.ts

import { environment } from "../environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from "@angular/fire/firestore";

your user/auth service file

import { auth, firestore } from "firebase/app";
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore } from "@angular/fire/firestore";

service constructor
constructor(public auth: AngularFireAuth) {}
login/logout logic

  onLogin() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider()).then(res => {
      // list of signed in logics
      console.log(res);
    });
  }

  onLogout() {
    this.auth.signOut().then(res => {
      // list of signed out in logics
      console.log("list of signout logic");
    });
  }

For a non JS/TS expert, i struggling to various types of import, firebase/auth, firebase, @angular/fire/auth, frankly i cant imagine how crazy the magic done behind :) but really thanks to the community's great support!! @EricSimons , @arikanorh !

[GaurangDhorda]

Today I am figured out that https://stackblitz.com/edit/angular-ivy-tmcsfk?file=src%2Fapp%2Fapp.component.ts Authentication working properly now with stackblitz. we need
import { auth } from 'firebase/app';
import 'firebase/auth';

[jamesdaniels]

Should not be an issue anylonger with the newer versions of the libs. Firebase v8 cleaned this up a lot.