Question

在尝试使用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)

我已经看到了解决方案here，该解决方案涉及更新rxjs和rxjs-compat，但是错误仍然存在。我将在下面包括我的依赖项，应用程序模块和身份验证服务。任何帮助将不胜感激。

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

}

Answer 1

我有同样的问题。角度/射击等级从6.0.0降到5.4.2

已解决。

使用AngularFireModule进行身份验证时键入错误

1 个答案: