Question

我只想使用离子3 + firebase身份验证。我遵循最新的指南，youtube，文档，但我在运行'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

我搜索了所有内容，但没有任何帮助。

我已经做过了：

我从这个链接"Runtime Error Zone already loaded" in ionic 3开始关注所有内容，但它没有解决我的问题
我试图删除'import zone ..'但找不到它。搜索了整个文件但无法精确导入区域。我来自这个链接How do I determine what zone is already loaded?

我现在找不到任何解决方案。任何建议都表示赞赏。

我的app.module.ts文件

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 {



}

我的register.html文件

<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>

我的register.ts文件

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

我今天遇到了确切的问题。它证明了 angularfire2

的问题

您可以在github上找到问题：Runtime Error Zone already loaded

一旦我回滚到rc4，一切正常，希望它有所帮助。

npm install angularfire2@5.0.0-rc.4

离子运行时错误 - 已加载区域

1 个答案: