在Angular 13项目中添加firebase不工作

我仍然在尝试在Angular项目中使用firebase。下面是错误">要么AngularFireModule没有在你的AppModule中提供(这可以手动完成，也可以隐式使用)或者你在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

这些就是我要遵循的步骤:

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

最后,

runng serve -o
打开浏览器控制台
点击按钮Sign in with Google
你会看到这个错误错误:要么AngularFireModule没有在你的AppModule中提供(这可以手动完成，也可以使用provideFirebaseApp隐式完成)，要么你在NgModule之外调用了AngularFire方法(这是不支持的)。

提前感谢您的帮助!

现在可以工作了。首先，我必须安装"firebase"。与npm i firebase其次，我已经删除了我的app.module.ts中的所有内容，我现在使用AngularFireModule和AngularFireAuthModule从" compat_quot;。查看代码并注意导入

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也利用"AngularFireAuth @angular/消防/兼容/auth"

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可能会给你带来麻烦。你必须使用" compet "因为firebase的新版本仍在开发中。因此，如果您使用此命令而它不起作用，请尝试使用解释的兼容性版本。

你可以尝试在app.module.ts中导入AngularFireModule。你试过吗?

在Angular项目中正确实现Firebase/GA4，以便在每条路由上都进行跟踪。使用yarn或npm安装angular/fire。

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。

尝试在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 
}

相关内容

最新更新

热门标签：