Error: Package path ./compat is not exported from package

Question

Note: I think I was able to to reproduce this (see stackblitz example). The error there is printed in the console as "INTERNAL ASSERTION FAILED: Expected a class definition". This is different to what I get locally but to me this looks like the same issue.

Anyway, just comment out line 15 in app.component.ts and the error will disappear.

我正在尝试开始使用 Firebase，但是当我安装和编译 Angular 项目时，出现以下错误：

Module not found: Error: Package path ./compat is not exported from package /home/sfalk/workspaces/web-mobile/node_modules/firebase (see exports field in /home/sfalk/workspaces/web-mobile/node_modules/firebase/package.json)

有趣的是，我只在注射 AuthService 例如像这样：

崩溃

import {Component, OnInit} from '@angular/core';
import {FormBuilder} from '@angular/forms';
import {AuthService} from "../../../services/auth.service";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  public loading = false;

  constructor(
    private formBuilder: FormBuilder,
    public authService: AuthService,
  ) {

  }
  
}

不崩溃

import {Component, OnInit} from '@angular/core';
import {FormBuilder} from '@angular/forms';
import {AuthService} from "../../../services/auth.service";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  public loading = false;

  constructor(
    // private formBuilder: FormBuilder,
    // public authService: AuthService,
  ) {

  }
  
}

授权服务

我不确定这个 class 是否导致了这个问题，我非常怀疑，但这是代码。没什么特别的。

唯一要提到的可能是我从 @angular/fire/compat 导入，这是根据 docs 的预期。

import {Injectable} from "@angular/core";
import {Observable, of} from "rxjs";
import {Router} from "@angular/router";
import firebase from "firebase/compat";
import {switchMap} from "rxjs/operators";
import {AngularFireAuth} from "@angular/fire/compat/auth";
import {AngularFirestore, AngularFirestoreDocument} from "@angular/fire/compat/firestore";
import User = firebase.User;
import auth = firebase.auth;


@Injectable({providedIn: 'root'})
export class AuthService {
  public user$: Observable<User | null>;

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router
  ) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        }
        return of(null);
      })
    ) as Observable<User>;
  }

  async googleSignIn() {
    const provider = new auth.GoogleAuthProvider();
    const credentials = await this.afAuth.signInWithPopup(provider);
    return this.updateUserData(credentials.user);
  }

  async signOut() {
    await this.afAuth.signOut();
    return this.router.navigate(['/'])
  }

  // noinspection TypeScriptValidateTypes
  private updateUserData(user: User | null) {
    if (!user) {
      throw "User is null."
    }
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);

    const data: any = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL
    }

    return userRef.set(data, {merge: true});
  }
}

在我的 package.json:

"@angular/fire": "^7.0.3",
"firebase": "^9.0.1",

另见

• Github issue

Answer 1

您需要更改导入自：

import firebase from "firebase/compat";

至

import firebase from "firebase/compat/app";
//                                    ^^^

Getting started with Firebase Authentication