ionic runtime error - zone already loaded - firebase

Question

I just wanted to use ionic 3 + firebase authentication. I followed the latest guidelines, youtube, documentation but i always encountered this problem when running 'ionic serve':
Error: Zone already loaded.
at http://localhost:8100/build/vendor.js:117672:15
at http://localhost:8100/build/vendor.js:118284:3
at FUNCTION (http://localhost:8100/build/vendor.js:117649:10)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:117652:2)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:120702:30)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.defineProperty.value (http://localhost:8100/build/vendor.js:69145:66)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:117167:72)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.9
Angular Core: 5.2.10
Angular Compiler CLI: 5.2.10
Node: 9.11.1
OS Platform: Windows 8.1
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
I have searched everything but nothing helps.
Thing i already did:
I follow everything from this link "Runtime Error Zone already loaded" in ionic 3 but it didn't solve my problem
I tried to remove 'import zone..' but could not find it. Searched the entire files but could not fine import zone. I got from this link How do I determine what zone is already loaded?
I could not find any solutions right now. Any suggestions given are appreciated.
My app.module.ts file
import { RegisterPage } from './../pages/register/register';
import { LoginPage } from './../pages/login/login';
import { CollectionPage } from './../pages/collection/collection';
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 { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
const firebaseAuth = {
apiKey: "Axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "fxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "hxxxxxxxxxxxxxx",
projectId: "fxxxxxxxxxxxxx",
storageBucket: "firxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxx"
};
#NgModule({
declarations: [
MyApp,
HomePage,
CollectionPage,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseAuth),
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
CollectionPage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
My register.html file
<ion-header>
<ion-navbar>
<ion-title>Register</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" value=""></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button color="primary" block (click)="registerUser()">Register</button>
</div>
</ion-content>
My register.ts file
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
#IonicPage()
#Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {
#ViewChild('username') user;
#ViewChild('password') password;
constructor(private fire: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RegisterPage');
}
registerUser() {
this.fire.auth.createUserWithEmailAndPassword(this.user.value, this.password.value)
.then(data => {
console.log('got data ', data);
})
.catch(error => {
console.log('got an error ', error);
});
console.log('Would register user with ', this.user.value, this.password.value);
}
}

Answer 1

I had the exact problem today. It proves a problem of angularfire2
You can find the issue on github: Runtime Error Zone already loaded
Once I rollback to rc4, everything works properly, hope it helps.
npm install angularfire2#5.0.0-rc.4