在 Angular 13 项目中添加 firebase 不起作用答案

【问题标题】：Adding firebase in Angular 13 project not working在 Angular 13 项目中添加 firebase 不起作用
【发布时间】：2022-07-08 06:03:33
【问题描述】：

我仍在尝试在 Angular 项目中使用 firebase。这是错误“您的 AppModule 中未提供 AngularFireModule（这可以手动完成或隐式使用 provideFirebaseApp) 或者你在 NgModule 之外调用 AngularFire 方法（不支持）"

在开始之前，这是我的 Angular-cli 版本：

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.4
Node: 14.19.0
Package Manager: npm 6.14.16
OS: win32 x64

Angular: 13.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.4
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.0.4
@angular-devkit/schematics      13.0.4
@angular/cli                    13.0.4

这些是步骤，我正在关注：

运行ng new angular-fire && cd angular-fire
我在 Firebase (https://console.firebase.google.com) 中创建了一个项目并激活了 Google 身份验证
运行ng add @angular/fire（请仅选择Authentication选项。我们暂时不需要其他选项）
上一条命令已更新您的 app.module.ts 和环境文件

我的 app.module.ts 现在看起来像：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，删除 app.component.html 中的所有内容并添加一个按钮：

<div>
  <button (click)="signIn()">Sign in with Google</button>
</div>

并在 app.component.ts 中添加 signIn 功能：

import { Component } from '@angular/core';
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
} from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  title = 'angular-fire';

  signIn() {
    return signInWithPopup(getAuth(), new GoogleAuthProvider())
      .then((result) => {
        const user = result.user;
        console.log(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;

        console.log('errorCode', errorCode);
        console.log('errorMessage', errorMessage);
      });
  }
}

最后，

运行ng serve -o
打开浏览器的控制台
点击按钮使用 Google 登录
你会看到这个错误错误：在你的 AppModule 中没有提供 AngularFireModule（这可以手动或隐式使用 provideFirebaseApp 完成）或者你在 NgModule 之外调用 AngularFire 方法（这不是支持）。

提前感谢您的帮助！

【问题讨论】：

标签： angular firebase angularfire2

【解决方案1】：

您可以尝试在 app.module.ts 上导入 AngularFireModule。你试过了吗？

【讨论】：