Ionic 2 Error of X page is part of the declarations of 2 modules

Question

I had gone through SO questions over here. But I am Unable to get What this error is trying to suggest. Please Help me out for this.

Lastly, HIGHER MODULE Means which module. As I am new to this That is why Not getting this correctly.

Mycode:

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

UPDATED CODE AS PER YOUR COMMENT

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

login.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);
  }
}

Answer 1

I assume you're using the Lazy Load feature of Ionic. What that error means, is that you're including the LoginPage in the declarations array of the NgModule both in the AppModule ( app.module.ts file) and the LoginPageModule .

In order to fix it, remove the LoginPage declaration of the AppModule , and if you need to use the LoginPage somewhere in the app (for instance, if you want to push that page), use the name but as a string, like this:

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

Since the name of the page is now a string, you won't need to import the LoginPage anymore

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

---

UPDATE

Just like you can see in the docs (thanks @suraj), please check that you're creating the module of the LoginPage like this:

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

And also check that you're adding the @IonicPage() decorator to the page:

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

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