AngularFire2 app.auth 不是函数答案

【问题标题】：AngularFire2 app.auth is not a functionAngularFire2 app.auth 不是函数
【发布时间】：2018-12-29 09:04:39
【问题描述】：

所以我一直在尝试使用 Angular 和 Firebase，并希望让 angularfire2 身份验证系统正常工作。我遵循了一些在线教程，并一起对这个应用程序进行了 frankensteined。大约一年前，我在 Angular2 做一个项目 ionic 应用程序方面有一点经验，但还没有与 Firebase 合作过。

错误是当我ng serve 遇到空白屏幕和控制台错误：

TypeError app.auth 不是函数

似乎这一定是由于AngularFireAuthModule 的设置不正确或其他原因造成的？

我提到了https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md，它似乎是正确的。这是应用程序https://github.com/jburns24/angularfire2-auth-bad-demo 的链接。

看起来就像AngularFire2 TypeError: app.auth is not a function 中提到的确切问题。

【问题讨论】：

看起来这可能是 angularfire2 和 firebase 包的问题有一个未解决的问题github.com/angular/angularfire2/issues/1707

标签： angular angularfire2

【解决方案1】：

您目前正在关注演示应用程序，我表明存在很多冲突。但您的目标是试验 Angular 和 Firebase。我建议您按照这些步骤操作。

在此之前创建一个新的 Angular 项目。

例如。

ng new my-app

现在安装 angularfire2 和 firbase：

npm install angularfire2 firebase --save

将 Firebase 配置添加到环境变量：

firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }

为AngularFireModule 和AngularFireAuthModule 设置@NgModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';

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

在你AppComponent 导入AngularFireAuth 和auth：

import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase';

并实现以下功能：

export class AppComponent {
  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

HTML：

<div *ngIf="afAuth.user | async as user; else showLogin">
  <h1>Hello {{ user.displayName }}!</h1>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login with Google</button>
</ng-template>

这些步骤与他们的DOC 相同。请参考以下链接：

希望对您有所帮助！

【讨论】：

进行了建议的更改，但我仍然收到相同的控制台错误。
查看了项目 github 和发布历史，他们引入了一个重大更改，您需要使用来自 firebase 的 auth 现在而不是导入 */firbase。 github.com/angular/angularfire2/releases/tag/5.0.0-rc.10
@Buster 最好遵循更新的答案步骤
谢谢你的帮助，我应该尽量恢复到最低限度。

【解决方案2】：

如果其他人遇到此问题，我最终通过删除节点模块文件夹中的所有内容、删除包锁定文件和正在运行的 npm install 来修复它。

【讨论】：