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

Question

我仍在尝试在 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
• I've created a project in Firebase ( https://console.firebase.google.com ) and activated authentication with Google
• 运行ng add @angular/fire （请 select 仅选项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 function：

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 方法（不支持）。

在此先感谢您的帮助 ！

Answer 1

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

Answer 2

它现在正在工作。 首先，我必须使用npm i firebase firebase 安装“firebase”其次，我已经删除了我的 app.module.ts 中的所有内容，我现在正在使用来自“compat”的AngularFireModule和AngularFireAuthModule 。 查看代码并注意导入

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

import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

接下来，在 app.component.ts 中也使用来自“@angular/fire/compat/auth”的 AngularFireAuth

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import * as auth from 'firebase/auth';

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

  constructor(private afAuth: AngularFireAuth) {}

  signIn() {
    return this.afAuth
      .signInWithPopup(new auth.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 add @angular/fire可能会给您带来麻烦。 您必须使用“compat”中的所有软件包，因为新版本的 firebase 仍在开发中。 因此，如果您使用此命令但它不起作用，请尝试按照说明使用兼容版本。

Answer 3

在 Angular 项目中正确实施 Firebase/GA4，以便对每条路线进行跟踪。 使用纱线或 npm 安装角/火。

npm i @angular/fire

然后添加初始化以导入到app.module.ts并定义提供程序。

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import {
  AngularFireAnalyticsModule,
  ScreenTrackingService,
  UserTrackingService,
} from '@angular/fire/compat/analytics';

import { environment } from '@env/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
  ],
  providers: [ScreenTrackingService, UserTrackingService],
  bootstrap: [AppComponent],
})
export class AppModule {}

记得在项目配置（环境变量）中添加 Firebase 设置。

   firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXX',
    authDomain: 'XXXXXX-analytics.firebaseapp.com',
    projectId: 'XXXXX-analytics',
    storageBucket: 'XXXXXX-analytics.appspot.com',
    messagingSenderId: 'CXXXXXX',
    appId: 'XXXXXX',
    measurementId: 'G-XXXXXXXX',
  },

ScreenTrackingService和UserTrackingService提供程序确保在每条路由上将默认事件发送到 Firebase。