X頁面的Ionic 2錯誤是2個模塊的聲明的一部分

Question

我在這里經歷了一些SO問題。 但是我無法獲得此錯誤試圖提示的內容。 請幫幫我。

最后，HIGHER MODULE表示哪個模塊。 由於我是新手，所以這就是為什么無法正確獲取它。

我的代碼：

app.module.ts

   @NgModule({
  declarations: [
    MyApp,
    UsersPage,
    ReposPage,
    OrganisationsPage,
    UserDetailsPage,
    LoginPage

  ],
  imports: [

    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage,
    UsersPage,
    ReposPage,
    OrganisationsPage,
    UserDetailsPage,


  ],

Login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule,IonicPage } from 'ionic-angular';
import { LoginPage } from './login';
//import { IonicPage } from 'ionic-angular';

@IonicPage()
@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
  entryComponents: [
    LoginPage
  ],
  exports: [
    LoginPage
  ]
})
export class LoginPageModule {}

根據您的評論更新代碼

app.module.ts

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  loading: Loading;
  registerCredentials = { email: '', password: '' };

  constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

  public createAccount() {
    this.nav.push('RegisterPage');
  }

  public login() {
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      console.log(allowed)
      if (allowed) {        
        this.nav.setRoot('HomePage');
      } else {
        this.showError("Access Denied");
      }
    },
      error => {
        this.showError(error);
      });
  }

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }

  showError(text) {
    this.loading.dismiss();

    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present(prompt);
  }
}

login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule,IonicPage } from 'ionic-angular';
import { LoginPage } from './login';
//import { IonicPage } from 'ionic-angular';


@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
  entryComponents: [
    LoginPage
  ],
  exports: [
    LoginPage
  ]
})
export class LoginPageModule {}

登錄名

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  loading: Loading;
  registerCredentials = { email: '', password: '' };

  constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

  public createAccount() {
    this.nav.push('RegisterPage');
  }

  public login() {
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      console.log(allowed)
      if (allowed) {        
        this.nav.setRoot('HomePage');
      } else {
        this.showError("Access Denied");
      }
    },
      error => {
        this.showError(error);
      });
  }

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }

  showError(text) {
    this.loading.dismiss();

    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present(prompt);
  }
}

Answer 1

我假設您正在使用Ionic的“延遲加載”功能。 什么是錯誤的手段，是，你包括LoginPage中declarations數組的NgModule無論是在AppModule （ app.module.ts文件）和LoginPageModule 。

為了對其進行修復，請刪除AppModule的LoginPage聲明，如果您需要在應用程序中的某處使用LoginPage （例如，如果您要推送該頁面），請使用名稱，但將其用作字符串，如下所示：

// Somewhere in your app
this.navCtrl.push('LoginPage'); // <- The name of the page is used as a string

由於頁面名稱現在是字符串，因此您不再需要導入LoginPage

// import { LoginPage } from '/path/to/login-page.ts'; <- You won't need to do this anymore

---

更新

就像您在文檔中看到的一樣（感謝@suraj），請檢查您是否正在創建LoginPage的模塊，如下所示：

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

並檢查您是否在頁面上添加了@IonicPage()裝飾器：

// Ionic
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({...})
export class MyPage {}