angular - La página es parte de las declaraciones de 2 módulos: Error en el producto de compilación iónica

typescript ionic-framework

Question

Cuando ejecuto npm run ionic: build puedo construir con éxito. Pero cuando ejecuto npm run ionic: build --prod obtengo el siguiente mensaje de error.

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)

Entiendo que estoy cargando los mismos módulos varias veces, pero no podía entender cómo eliminarlos.

my app.module.ts

@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 es

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

Answer 1

Este es un error básico de angular. Puedes ver el problema here . Entonces, la respuesta que se acepta hasta ahora es usar el módulo de compartir. Puedes hacer así:
- Crear un share.module.ts
- Import , declaration y export tu componente en este share.module.ts

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

- Si desea utilizar su componente en una página Ionic (página de carga diferida) , importe el módulo compartido en el módulo de esa página Ionic:

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

- Si desea utilizar su componente en otro componente o no tener una página de carga diferida , importe el módulo compartido en su app.module.ts como se indicó anteriormente.
Ver más sobre ngModule

Answer 2

No necesita declarar nada en app.module.ts sobre PatientDetailPageModule . Por lo tanto, elimine todas las referencias a él. Si necesita usar el módulo PatientDetailPageModule dentro de otro componente, simplemente import como se muestra a continuación.

another.module.ts

@NgModule({
imports: [
PatientDetailPageModule,
],
})

Utilice las compilaciones de Cordova :

ionic cordova build android --prod

Answer 3

Si está utilizando un componente como un EntryComponent dentro de un módulo, no necesita declararlo dentro del Módulo. Intente eliminar PatientDetailPage de las declarations en su app.module.ts .

Entonces, la mejor manera de hacer esto en mi opinión es export su PatientDetailPage desde su PatientDetailModule e importar el PatientDetailModule en su App Module.

Módulo de aplicación

@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],
})

Módulo paciente

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