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

Question

我仍在尝试在一个Angular项目中使用Firebase。这是您的AppModule中未提供的错误“ 尚未提供AngularFiremodule（可以手动或暗示使用此操作 supportfirebaseapp）否则您正在调用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

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

• Run run NG新的Angular-fire＆amp; amp; cd Angular-Fire
• 我在firebase中创建了一个项目（ https://console.firebase.google.com ）并通过Google
• Run Run ng添加 @ Angular/Fire（请仅选择选项身份验证。我们目前不需要其他
• 命令 ）已经更新了您的 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 { }

添加一个按钮：

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

现在，在app.component.html中删除所有内容，然后 。

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);
      });
  }
}

​

• ​
• ​
• ​
• 您会看到此错误错误：您的AppModule中尚未提供AngularFiremodule（可以使用SubliceFireBaseApp手动或隐含地进行此操作），或者您在NGMODULE之外称呼AngularFire方法（不支持）。

事先感谢您的帮助！

Answer 1

现在正在工作。
首先，我必须使用npm I Firebase安装“ firebase”
其次，我现在使用了angularFireModule和angularFireAuthModule从“ compat”中删除了我现在使用的所有内容。 请参阅代码并注意

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中，

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);
      });
  }
}

接下来的 Imports 。您必须使用“ Compat”中的所有软件包，因为Firebase的新版本仍在开发中。因此，如果您使用此命令并且不起作用，请尝试使用所解释的兼容性版本。

Answer 2

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

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。

Answer 4

尝试在AppComponent的构造函数中初始化类型AUTH的变量（您必须从“@angular/fire/auth”中导入它）。

import { Auth } from '@angular/fire/auth' //import statement


export class AppComponent  {
      constructor(private auth: Auth){}   

      //I did this, it worked for me 
}