Angular 6和Firebase-AngularFireAuth

时间:2018-08-02 15:09:20

标签: angular firebase

我具有以下用于登录的组件:

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

1 个答案:

答案 0 :(得分:1)

@NgModuleAngularFireModule设置AngularFireAuthModule如下:

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

希望这对您有帮助!