注意: 我认为我已经能够复现这个问题 (参见 stackblitz范例). 在控制台中打印的错误信息是“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时，才会出现此错误，例如：
Crashes
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,
) {
}
}
AuthService
我不确定这个类是否导致了问题，但我非常怀疑，以下是代码。没有什么特别的地方。
唯一需要提到的可能是我从@angular/fire/compat中导入，这符合文档的意图。
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 问题
@angular/fire/compat。 - Stefan Falk