I'm getting the following error on my ionic3 app
Uncaught Error: Unexpected value 'AngularFireAuth' imported by the module 'AppModule'. Please add a @NgModule annotation.
Here's my 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;
}
}
And the package.json if it's necessary:
{
"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"
]
}
}
I'm trying to authenticate with angularfire2/auth, but i got this error. May be it's any issue with angularfire2 version or something like that?
I don't know why i'm getting that error, i'm using Firebase, Angularfire, and Angular Google Maps.
AngularFireAuthis a module? only modules go in the imports barrel. you correctly haveAngularFireModulein the imports barrel but i suspect thatAngularFireAuthis a provider and hence needs to go into the providers barrel not the imports barrel. – MilesStanfield