错误：包路径 ./compat 未从包中导出

Question

注意：我想我能够重现这一点（请参阅stackblitz example）。那里的错误在控制台中打印为“INTERNAL ASSERTION FAILED: Expected a class definition”。这与我在本地得到的不同，但对我来说这看起来是同一个问题。

不管怎样，把app.component.ts中的第15行注释掉，错误就会消失。

我正在尝试开始使用 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,
  ) {

  }
  
}

授权服务

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

唯一要提的可能是我从@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