Angular 6 and Firebase - AngularFireAuth

Question

I have the following component for logging in:

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

I get the following error when compiling:

./node_modules/@firebase/auth/dist/auth.esm.js Module not found: Error: Can't resolve '@firebase/app' in 'C:\Users\scott\Documents\Visual Studio 2017\Projects\oshop\node_modules\@firebase\auth\dist'

As you can see, in this code I don't use afAuth, but I note that if I comment out its use in the constructor, the error is fixed.

I am using Angular 6.0.3 and Firebase 5.3.0, which I verify by looking at my package.json.

Why am I getting this error?

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

score 2 · Accepted Answer · answered Aug 02 '18 at 15:27

2

Setup @NgModule for the AngularFireModule and AngularFireAuthModule like below :

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

Hope this will helps you!

answered Aug 02 '18 at 15:27

coder

8,346
16
39
53

I did NOT have AngularFireAuthModel set up like this in my app.module.ts. However, I just added as above, and get the same error. Taking that out results in a clean compile. IOW, the problem still exists. – Scott Aug 02 '18 at 15:42
can you post your `app.module.ts` ? also `AngularFireAuthModel ` should be change to `AngularFireAuthModule` – coder Aug 02 '18 at 15:48
I added app.module.ts. And AngularFireAuthModel above was a typo. – Scott Aug 02 '18 at 16:02
you have to put `AppComponent` and `LoginComponent` to declarations array of `@NgModule` – coder Aug 02 '18 at 16:23
You are indeed correct, however, doing that did not solve the problem. – Scott Aug 02 '18 at 16:24
what is the version of `angularfire2` ? – coder Aug 02 '18 at 16:27
from package.json: "angularfire2": "^5.0.0-rc.11", – Scott Aug 02 '18 at 16:28
it is working with angular version `^6.0.0` if you could try to use this version and try it again – coder Aug 02 '18 at 16:36
did you try by deleting node_modules and re install them again? – coder Aug 02 '18 at 16:53
if it not work and if you like, you have another solution to update your angular. use this [link](https://stackoverflow.com/questions/43931986/how-to-upgrade-angular-cli-to-the-latest-version). because now it working even in angular `^6.1.0` – coder Aug 02 '18 at 16:59
I just ran ng -v and it says 6.1.0, but my package.json says 6.0.3. Can I just change the package? – Scott Aug 02 '18 at 17:29
first use `npm install @angular/cli` and then use `ng update @angular/core` – coder Aug 02 '18 at 17:32
I did both. Should package.json have been updated? It wasn't. Also, I tried creating a new project and package.json still have 6.0.3. – Scott Aug 02 '18 at 17:53
you have to do above commands in the root of the project. normally it will automatically update your package.json file – coder Aug 03 '18 at 02:19
I just duplicated my project and reinstalled firebase. This solved the problem. I am marking this answer as accepted because your suggestion of deleting node_modules and reinstalling suggested to me to do this. – Scott Aug 03 '18 at 20:24
glad to help you! – coder Aug 04 '18 at 04:03

Angular 6 and Firebase - AngularFireAuth

1 Answers1