Question

我的ionic3应用程序出现以下错误

未捕获错误：模块“AppModule”导入的意外值“AngularFireAuth”。请添加@NgModule注释。

这是我的app.module.ts：

  import { BrowserModule } from '@angular/platform-browser';
    import { ErrorHandler, NgModule } from '@angular/core';
    import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { ListPage } from '../pages/list/list';
    import { LoginPage } from '../pages/login/login';

    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';

    import { HttpModule } from '@angular/http';
    import { Geolocation } from '@ionic-native/geolocation';
    import { AngularFireDatabaseModule, AngularFireDatabase } from 
    'angularfire2/database';
    import { AngularFireModule } from 'angularfire2';
    import { AngularFireAuth } from 'angularfire2/auth';
    import { AgmCoreModule } from '@agm/core';

    import { FirebaseServices } from '../providers/firebase-services/firebase-services';
    import { GeoFireServices } from '../providers/geofire-services/geofire-services';
    import { FireauthServices } from '../providers/fireauth-service/fireauth-service';

    const firebaseConfig = {
      apiKey: "AIzaSyA2sV38dAZI3004wpxrvTB2wOuzQBBjc-w",
      authDomain: "wayuuk-project.firebaseapp.com",
      databaseURL: "https://wayuuk-project.firebaseio.com",
      projectId: "wayuuk-project",
      storageBucket: "wayuuk-project.appspot.com",
      messagingSenderId: "67344285680"
    };

    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        ListPage,
        LoginPage,
      ],
      imports: [
        BrowserModule,
        HttpModule,
        AngularFireDatabaseModule,
        AngularFireModule.initializeApp(firebaseConfig),
        AngularFireAuth,
        AgmCoreModule.forRoot({
          apiKey: 'AIzaSyDY6kQeu8zIxF9ZiQSuISLd5OU_hIAZ254'
        }),
        IonicModule.forRoot(MyApp, {
          scrollAssist: false,
          autoFocusAssist: false,
        })
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        ListPage,
        LoginPage
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        Geolocation,
        FirebaseServices,
        GeoFireServices,
        FireauthServices
      ]
    })
    export class AppModule {}

app.component.ts：

  import { Component, ViewChild } from '@angular/core';
    import { Nav, Platform } from 'ionic-angular';
    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';

    import { LoginPage } from '../pages/login/login';
    import { HomePage } from '../pages/home/home';
    import { ListPage } from '../pages/list/list';

    import { FireauthServices } from '../providers/fireauth-service/fireauth-service';


    @Component({
      templateUrl: 'app.html'
    })
    export class MyApp {
      @ViewChild(Nav) nav: Nav;

      rootPage: any;

      pages: Array<{title: string, component: any}>;

      menuSelected: string;

      constructor(public platform: Platform, 
                  public statusBar: StatusBar, 
                  public splashScreen: SplashScreen,
                  private fireauth: FireauthServices) {

        this.initializeApp();

        // used for an example of ngFor and navigation
        this.pages = [
          { title: 'Home', component: HomePage },
          { title: 'List', component: ListPage }
        ];

        this.rootPage = LoginPage;

      }

      initializeApp() {
        this.platform.ready().then(() => {
          // Okay, so the platform is ready and our plugins are available.
          // Here you can do any higher level native things you might need.
          this.statusBar.styleDefault();
          this.splashScreen.hide();
        });
      }

      openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
      }

      clickMenu(option){
        switch(option){
          case 'logout':
            this.nav.setRoot(LoginPage);
            break;

          default:
            break;
        }

        this.menuSelected = option;
      }
    }

如果有必要，请输入package.json：

 {
      "name": "",
      "version": "0.0.1",
      "author": "Ionic Framework",
      "homepage": "http://ionicframework.com/",
      "private": true,
      "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
      },
      "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/animations": "5.2.9",
        "@angular/common": "5.2.9",
        "@angular/compiler": "5.2.9",
        "@angular/compiler-cli": "5.2.9",
        "@angular/core": "5.2.9",
        "@angular/forms": "5.2.9",
        "@angular/http": "5.2.9",
        "@angular/platform-browser": "5.2.9",
        "@angular/platform-browser-dynamic": "5.2.9",
        "@ionic-native/core": "4.5.3",
        "@ionic-native/geolocation": "^4.7.0",
        "@ionic-native/splash-screen": "4.5.3",
        "@ionic-native/status-bar": "4.5.3",
        "@ionic/storage": "2.1.3",
        "angularfire2": "^4.0.0-rc0",
        "cordova-android": "~7.0.0",
        "cordova-plugin-device": "^2.0.1",
        "cordova-plugin-geolocation": "^4.0.1",
        "cordova-plugin-ionic-keyboard": "^2.0.5",
        "cordova-plugin-ionic-webview": "^1.1.16",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-whitelist": "^1.3.3",
        "firebase": "^4.1.3",
        "geofire": "^4.1.2",
        "ionic-angular": "3.9.2",
        "ionicons": "3.0.0",
        "promise-polyfill": "^7.1.2",
        "rxjs": "5.5.7",
        "setimmediate": "^1.0.5",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.20"
      },
      "devDependencies": {
        "@ionic/app-scripts": "3.1.8",
        "typescript": "~2.6.2"
      },
      "description": "An Ionic project",
      "cordova": {
        "plugins": {
          "cordova-plugin-whitelist": {},
          "cordova-plugin-device": {},
          "cordova-plugin-splashscreen": {},
          "cordova-plugin-ionic-webview": {},
          "cordova-plugin-ionic-keyboard": {},
          "cordova-plugin-geolocation": {
            "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
          }
        },
        "platforms": [
          "android"
        ]
      }
    }

我正在尝试使用angularfire2 / auth进行身份验证，但我收到了此错误。可能是angularfire2版本的任何问题还是类似的东西？

我不知道为什么我会收到这个错误，我正在使用Firebase，Angularfire和Angular Google Maps。

Answer 1

您应该将AngularFireAuthModule导入导入数组中。

import { AngularFireAuthModule } from 'angularfire2/auth';

imports: [
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule,      // for db
  AngularFireAuthModule           // for auth
],

请参阅 guidance 。

错误：意外值'AngularFireAuth'。由“AppModule”模块导入

1 个答案: