Angular 6 和 Firebase - AngularFireAuth

Question

我有以下登录组件：

import { Component } from "@angular/core";
import { AngularFireAuth } from "angularfire2/auth";

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

编译时出现如下错误：

./node_modules/@firebase/auth/dist/auth.esm.js 未找到模块： 错误：无法解析“@firebase/app” 'C:\Users\scott\Documents\Visual Studio 2017\Projects\oshop\node_modules\@firebase\auth\dist'

如你所见，在这段代码中我没有使用afAuth，但我注意到如果我在构造函数中注释掉它的使用，错误就会得到修复。

我使用的是 Angular 6.0.3 和 Firebase 5.3.0，我通过查看我的 package.json 来验证。

为什么会出现这个错误？

我的 app.module.ts：

import { AppComponent } from "./app.component";
import { LoginComponent } from "./login.component";
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { environment } from "./../environments/environment";
import { AngularFireModule } from "angularfire2";
import { AngularFireDatabaseModule } from "angularfire2/database";
import { AngularFireAuthModule } from "angularfire2/auth";
import { AppRoutingModule } from "./app-routing.module";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap"


@NgModule({
  declarations: [   
     AppComponent,
     LoginComponent 
 ],
imports: [
   BrowserModule,
   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFireAuthModule,
   AngularFireDatabaseModule,
   AppRoutingModule,
   NgbModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
 })

 export class AppModule {}

Answer 1

为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 {}

希望对你有帮助！