ListDetailsPage является частью 2 модулей. Пожалуйста, переместите ListDetailsPage на более высокий модуль, который импортирует AppModule и ListDetailsPageModule

Question

Я новичок в ionic3, у меня есть 2 страницы, одна из них - это страница со списком, в которой есть список, и я получаю этот список из API Rest, когда я нажимаю на конкретный элемент из этого списка, в то время я хочу получить подробностиэтой страницы, но когда я нажимаю на конкретный элемент, я получаю сообщение об ошибке: ListDetailsPage is part of the declaration of 2 modules, Please consider moving ListDetailsPage to a higher module that imports AppModule and ListDetailsPageModule. Может ли кто-нибудь помочь мне, почему я получаю эту ошибку?Здесь я добавил свой весь код,

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

Причина этой ошибки ListDetailsPage включена в массив declarations list-details.module.ts и app.module.ts.Вы должны объявить ListDetailsPage только в одном месте.Чтобы исправить эту ошибку, удалите ListDetailsPage из declarations файла app.module.ts и добавьте ListDetailsPageModule в imports массив app.module.ts.

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