angular - Sayfa 2 modülün declarations bölümünün bir parçası: ionic build prod sırasında hata

Ben npm run ionic:build komutunu çalıştırdığımda başarılı bir şekilde derleyebiliyorum. Ama npm run ionic:build --prod komutunu çalıştırdığımda aşağıdaki hata mesajını alıyorum.

Error: Type PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts is 
            part of the declarations of 2 modules: AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and 
            PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts! 
            Please consider moving PatientDetailPage in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts to a higher module that imports 
            AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. You can also create a new 
            NgModule that exports and includes PatientDetailPage in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts then import that NgModule in 
            AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. 
Error: Type PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts is part of the declarations of 2 modules: AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts! Please consider moving PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts to a higher module that imports AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. You can also create a new NgModule that exports and includes PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts then import that NgModule in AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts.
    at syntaxError (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34)
    at CompileMetadataResolver._addTypeToModule (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14655:31)
    at /home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14543:27
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14534:54)
    at addNgModule (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58)
    at /home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14
    at Array.forEach (native)
    at _createNgModules (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26)
    at analyzeNgModules (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:22935:14)

Aynı modülleri birden fazla kez yüklediğimi anlıyorum, ama onları nasıl kaldıracağımı anlayamadım.

benim app.module.ts dosyam

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireOfflineModule,
    IonicStorageModule.forRoot()
   // PatientDetailPage

  ],
  declarations: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  entryComponents: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    //AngularFireModule,
    //Storage,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
   bootstrap: [IonicApp],
})

patient-detail.module.ts şudur

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PatientDetailPage } from './patient-detail';

@NgModule({
  declarations: [
    PatientDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(PatientDetailPage),
  ]

})
export class PatientDetailPageModule {

}

Cevap #1

Bu, Angular'ın temel bir hatasıdır. Sorunu burada görebilirsiniz. Şimdiye kadar kabul edilen cevap, paylaşım modülünü kullanmaktır. Bunu şöyle yapabilirsiniz:
- Bir share.module.ts oluşturun
- Bu share.module.ts içinde bileşeninizi import, declaration ve export edin

import { NgModule }       from '@angular/core';
import {SharedComponentA} from "./SharedComponentA";
import {SharedComponentB} from "./SharedComponentB";

@NgModule({
    imports: [
    ],
    declarations: [
      SharedComponentA,
      SharedComponentB

    ],
    providers: [
    ],
    exports: [
      SharedComponentA,
      SharedComponentB
    ]
})
export class SharedModule {}

- Bileşeninizi bir Ionic Sayfasında (tembel yükleme sayfası) kullanmak istiyorsanız, o Ionic sayfasının modülüne paylaşım modülünü import edin:

import {SharedModule } from './SharedModule';
@NgModule({
    imports: [
        SharedModule    
        //..
    ],
    //..
})

- Eğer bileşeninizi başka bir bileşende veya lazy load olmayan bir sayfada kullanmak istiyorsanız, paylaşılan modülü yukarıdaki gibi app.module.ts dosyanıza import edin.
ngModule hakkında daha fazlasını görebilirsiniz

Cevap #2

Bir bileşeni bir modül içinde entryComponent olarak kullanıyorsanız, bunu Modül içinde bildirmenize gerek yoktur. app.module.ts dosyanızdaki declarations içinden PatientDetailPage öğesini kaldırmayı deneyin.

Bence bunu yapmanın en iyi yolu, PatientDetailPage öğenizi PatientDetailModule öğenizden export etmek ve PatientDetailModule öğesini Uygulama Modülünüze import etmektir.

Uygulama Modülü

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireOfflineModule,
    PatientDetailModule,
    IonicStorageModule.forRoot()
   // PatientDetailPage

  ],
  declarations: [
    MyApp,
    HomePage
  ],
  entryComponents: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    //AngularFireModule,
    //Storage,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
   bootstrap: [IonicApp],
})

Hasta Modülü

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PatientDetailPage } from './patient-detail';

@NgModule({
  declarations: [
    PatientDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(PatientDetailPage),
  ],
  exports: [
    PatientDetailPage
  ]

})
export class PatientDetailPageModule {

}

İlgili makaleler