如何在angular 4中实现GoogleAuth登录

我是angular的新手，我一直致力于实现google登录。我已经创建了一个按钮，点击它不是重定向到谷歌登录页面我得到错误。我不知道是什么导致了这个错误。所以我要分享我的代码：

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


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent  {
  constructor(private afAuth: AngularFireAuth ){}

  loginbtn() {
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

}

模块：

import { AngularFireAuth} from 'angularfire2/auth';
providers: [AngularFireAuth]

错误：

core.js:1449 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

---

模块设置错误。您对AngularFireAuth的提供（

提供程序：[AngularFireAuth]

）。删除此项并将

AngularFireAuthModule

添加到导入中：

...
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
...

@NgModule({
    imports: [
        ...
        // Firebase
        AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
        AngularFirestoreModule, // imports firebase/firestore, only needed for database features
        AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
        ...
    ],
    providers: [
        // remove AngularFireAuth
    ],
    ...
})

---

有关更多信息，请查看。

您需要将

AngularFireAuth

添加到模块

提供程序

数组库中，以获得回复，根据你的建议，我已经添加了这个依赖项，但它仍然不起作用。你能编辑你的问题并为你的模块添加代码吗？我已经编辑了，你能检查一下吗？AngularFireAuth到底是什么？这是一节课吗？这是一个例子吗？根据这一点，您需要更改provider语句，以反映要添加的提供程序的类型。例如，如果AngularFireAuth是一个需要实例化的类，您可以像这样提供它

{provide:'AngularFireAuth'，useClass:AngularFireAuth}

。如果您正在处理不需要实例化的实例或导入，请执行

{provide:'angularfieauth'，useValue:angularfieauth}

。在您的组件中，这两种情况下，注入看起来都像

@Inject（'AngularFireAuth'）private afAuth

Hi Tim，我从'angularfire2/firestore'导入{AngularFirestoreModule}时出现编译错误@UmeshC是否可以添加angularfire2、firebase的版本号以及出现的错误请检查版本号“angularfire2”：“^4.0.0-rc.1”、“firebase”：“^4.2.0”，错误：[ts]找不到模块“angularfire2/firestore”。