1

I'm getting the following error when using trying to use AngularFireModule.

main.ts:13 TypeError: Object(...) is not a function
    at new AngularFireModule (angular-fire.js:372)
    at Object.AngularFireModule_Factory [as factory] (angular-fire.js:391)
    at R3Injector.hydrate (core.js:17053)
    at R3Injector.get (core.js:16803)
    at core.js:16849
    at Set.forEach (<anonymous>)
    at R3Injector._resolveInjectorDefTypes (core.js:16845)
    at new NgModuleRef$1 (core.js:36441)
    at NgModuleFactory$1.create (core.js:36540)

I've seen the solution here, which involves updating rxjs and rxjs-compat, but the error is still present. I'll include my dependencies, app module and authentication service below. Any help would be appreciated.

package.json

    "dependencies": {
    "@angular/animations": "~9.1.3",
    "@angular/cdk": "~9.2.1",
    "@angular/common": "~9.1.3",
    "@angular/compiler": "~9.1.3",
    "@angular/core": "^9.1.3",
    "@angular/fire": "latest",
    "@angular/forms": "~9.1.3",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "^9.1.3",
    "@angular/platform-browser-dynamic": "~9.1.3",
    "@angular/router": "~9.1.3",
    "angularfire2": "^5.4.2",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "firebase": "^6.6.2",
    "moment": "^2.24.0",
    "mongodb": "^3.5.4",
    "mongoose": "^5.9.2",
    "promise-polyfill": "8.1.3",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.3",
    "@angular/cli": "~9.1.3",
    "@angular/compiler-cli": "~9.1.3",
    "@angular/language-service": "~9.1.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuth, AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { VenueComponent } from './venue';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AlertComponent } from './_components';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { PlayerComponent } from './player';
import { UserMusicComponent } from './user-music';
import { MapComponent } from './map';
import { SetVenueComponent } from './set-venue';
import { MusicPreferencesComponent } from './music-preferences';
import { RecommendedVenuesComponent } from './recommended-venues';
import { SelectMusicComponent } from './select-music';
import { PaymentComponent } from './payment';
import { AccountComponent } from './account';
import { AuthenticationService } from './_services';

const firebaseConfig = {
  apiKey: 'XXXXXXXXXXXXXX',
  authDomain: 'XXXXXXXXXXXX',
  databaseURL: 'XXXXXXXXXXX',
  projectId: 'XXXXXXXXXXXXXX',
  storageBucket: 'XXXXXXXXXXXXX',
  messagingSenderId: 'XXXXXXXXXXX',
  appId: 'XXXXXXXXXXXXXXXXXXXXX',
  measurementId: 'XXXXXXXXXXX'
};

@NgModule({
  declarations: [
    AppComponent,
    VenueComponent,
    LoginComponent,
    RegisterComponent,
    AlertComponent,
    PlayerComponent,
    UserMusicComponent,
    MapComponent,
    SetVenueComponent,
    MusicPreferencesComponent,
    RecommendedVenuesComponent,
    SelectMusicComponent,
    PaymentComponent,
    AccountComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
    MaterialModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
     AuthenticationService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Authentication.service.ts

import { Injectable, NgZone } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { User } from '../_interfaces/user';
import * as firebase from 'firebase/app';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<any>;
    public currentUser: Observable<any>;
    user: Observable<firebase.User>;
    returnUrl: string;

    constructor(private http: HttpClient,
                public afs: AngularFirestore,
                public afAuth: AngularFireAuth,
                public router: Router,
                public ngZone: NgZone
        ) {
          this.afAuth.authState.subscribe(user => {
            if (user) {
              this.user = this.afAuth.authState;
              localStorage.setItem('currentUser', JSON.stringify(this.user));
              JSON.parse(localStorage.getItem('currentUser'));
            } else {
              localStorage.setItem('currentUser', null);
              JSON.parse(localStorage.getItem('currentUser'));
            }
          });
          this.currentUserSubject = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser')));
          this.currentUser = this.currentUserSubject.asObservable();
    }

    public get currentUserValue() {
        return this.currentUserSubject.value;
    }

    login(email, password) {
      this.afAuth.signInWithEmailAndPassword(email, password).then((result) => {
        this.ngZone.run(() => {
          this.router.navigate([this.returnUrl]);
        });
        this.setUser(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
        ;

    }

    logout() {
        // remove user from local storage and set current user to null
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }

    register(email: string, password: string) {
      this.afAuth.createUserWithEmailAndPassword(email, password).then(
        value => {
          console.log('Successfully registered ', value);
          this.setUser(value.user);
        })
      .catch(err => {
        console.log('Something went wrong:', err.message);
      });
    }


    forgotPassword(passwordResetEmail) {
      return this.afAuth.sendPasswordResetEmail(passwordResetEmail)
      .then(() => {
        window.alert('Password reset email sent, check your inbox.');
      }).catch((error) => {
        window.alert(error);
      });
    }


    setUser(user) {
      const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
      const userData: User = {
        uid: user.uid,
        email: user.email,
        displayName: user.displayName,
        photoURL: user.photoURL,
        emailVerified: user.emailVerified,
        gender: user.gender,
        age: user.age,
        musicPreferences: user.musicPreferences,
        recentVenues: user.recentVenues,
        userType: user.userType
      };
      return userRef.set(userData, {
        merge: true
      });
    }

}
4
  • Exactly at which point of code execution are you getting the error? Commented Apr 24, 2020 at 22:59
  • Have you tried this proposed solution: github.com/angular/angularfire/issues/… Commented Apr 24, 2020 at 23:01
  • @Kisinga when I ng serve, the error comes up. It points to main.ts line 13 which is just an error catcher platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); Commented Apr 24, 2020 at 23:02
  • @Kisinga yes I tried that solution but had no luck with it Commented Apr 24, 2020 at 23:14

1 Answer 1

1

I had the same issue. Downgraded angular/fire to 5.4.2 (from 6.0.0)

resolved.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.