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

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());

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (3 by maintainers)

Most upvoted comments

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

jamesdaniels on Apr 9, 2020

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 !

weilies on May 21, 2020