Page is part of the declarations of 2 modules: Error in ionic build prod
When I run npm run ionic:build I am able to build successfully. But When I run npm run ionic:build --prod I am getting following error message.
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)
I understand that I am loading same modules multiple times, But could not understand how to remove them.
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 is
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 {
}
Solution 1:
This is a basic error of angular. You can see the issue here. So the answer that is accepted till now is use share module. You can do like this:
- Create a share.module.ts
- Import, declaration and export your component in this 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 {}
- If you want to use your component in a Ionic Page(lazy load page), import share module in the module of that Ionic page:
import {SharedModule } from './SharedModule';
@NgModule({
imports: [
SharedModule
//..
],
//..
})
- If you want to use your component in other component or no lazy load page, import share module in your app.module.ts like above.
See more about ngModule
Solution 2:
If you are using a component as an entryComponent within a module you do not need to declare it within the Module. Try removing PatientDetailPage from the declarations on your app.module.ts.
So the best way to do this in my opinion is to export your PatientDetailPage out from your PatientDetailModule and import the PatientDetailModule into your App Module.
App Module
@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],
})
Patient Module
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 {
}
Solution 3:
You don't need to declare anything on app.module.ts about PatientDetailPageModule.So remove all references to it.If you need to use PatientDetailPageModule module inside another component then just import like below.
another.module.ts
@NgModule({
imports: [
PatientDetailPageModule,
],
})
Use Cordova builds:
ionic cordova build android --prod