ListDetailsPage is part of 2 modules, Please moving ListDetailsPage to a higher module that imports AppModule and ListDetailsPageModule

Question

I am new in ionic3, I have 2 pages one is listing page which have listing, and i am getting that listing from the Rest API, when i click on particular item from that listing, at that time i want to get details of that page, but when i click on particular item i am getting error : ListDetailsPage is part of the declaration of 2 modules, Please consider moving ListDetailsPage to a higher module that imports AppModule and ListDetailsPageModule, Can anyone please help me why i am getting this error ? Here i have added my all the code,

1) app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ListDetailsPage } from '../pages/list-details/list-details';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    ListDetailsPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,    
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    ListDetailsPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2) list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

/**
 * Generated class for the ListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {     

  list: Observable <any>;

  constructor(public navCtrl: NavController, public navParams: NavParams,public httpClient: HttpClient) {
        this.list = this.httpClient.get('https://swapi.co/api/films');
        /*this.list
        .subscribe(data => {
          console.log('my data: ', data);
        })*/  
  }   

  openDetails(list) {
    this.navCtrl.push('ListDetailsPage', {list:list});
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListPage');
  }

}

3) list.details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the ListDetailsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-list-details',
  templateUrl: 'list-details.html',
})
export class ListDetailsPage {
  list_detail: any;  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.list_detail = this.navParams.get('list');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListDetailsPage');
  }

}

4) list.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ListPage } from './list';



@NgModule({
  declarations: [
    ListPage
  ],
  imports: [
    IonicPageModule.forChild(ListPage)
  ],
})
export class ListPageModule {}

5) list-details.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ListDetailsPage } from './list-details';

@NgModule({
  declarations: [
    ListDetailsPage,
  ],
  imports: [
    IonicPageModule.forChild(ListDetailsPage),
  ],
})
export class ListDetailsPageModule {}

Answer 1

The reason for this error is ListDetailsPage is included in declarations array of list-details.module.ts and app.module.ts. You should declare ListDetailsPage only in one place. To fix this error remove ListDetailsPage from declarations of app.module.ts and add ListDetailsPageModule to imports array of app.module.ts.

   @NgModule({
      declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        ListPage,
        TabsPage
      ],
      imports: [
        ...  
        ListDetailsPageModule 
      ]
    })
    export class AppModule {}