angular - 类型错误 : Cannot read property 'GoogleAuthProvider' of undefined

Question

使用 Angular cli v5 和 angularfire2 v5，在控制台和终端上没有错误，一切运行正常，但在调用 google 登录功能时在浏览器控制台上出现错误。

源代码:

import { Component, OnInit, HostBinding  } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AngularFireAuth],
  animations: [moveIn()],
  host: {'[@moveIn]': ''}
})
export class LoginComponent implements OnInit {

  error: any;
  constructor(public afAuth: AngularFireAuth) {  }

  loginGoogle() {
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
     this.afAuth.auth.signOut();
  }

  ngOnInit() {  }
}

Answer 1

再次 npm install 时收到警告消息，消息是 angularfire2@5.0.0-rc.5-next requires a peer of firebase@^4.5.0 but none was installed，然后尝试使用 4.5.0 单独安装 firebase。

npm install firebase@4.5.0 --save

然后更改导入:

from import * as firebase from 'firebase/app';

从“firebase”导入 * 作为 firebase；

现在运行良好。

注意:最后在 app.module 中添加了 import { AngularFireAuthModule } from 'angularfire2/auth'; 以避免 Uncaught (in promise): Error: No AngularFireAuth 的提供者!