Component "is part of the declarations of 2 modules" error when building (but not running on emulator)

Ionic Framework
1

So, I’m using Genymotion as an emulator, and Ionic 4.

So normally to run on the emulator, I run this command:
ionic cordova run android -l -c -s --debug

Awesome, so far so good. Apps works, logs in and everything. When I tried generating the apk so I can sign and upload to Play Store, runing this command:

ionic cordova build android --prod --release

I got an error:

ERROR in : Type SelectorPage in D:/yesApp/side/src/app/selector/selector.page.ts is part of the declarations of 2 modules: ComponentsModule in D:/yesApp/side/src/app/components/components.module.ts and SelectorPageModule in D:/yesApp/side/src/app/selector/selector.module.ts! Please consider moving SelectorPage in D:/yesApp/side/src/app/selector/selector.page.ts to a higher module that imports ComponentsModule in D:/yesApp/side/src/app/components/components.module.ts and SelectorPageModule in D:/yesApp/side/src/app/selector/selector.module.ts. You can also create a new NgModule that exports and includes SelectorPage in D:/yesApp/side/src/app/selector/selector.page.ts then import that NgModule in ComponentsModule in D:/yesApp/side/src/app/components/components.module.ts and SelectorPageModule in D:/yesApp/side/src/app/selector/selector.module.ts.

So I search here in the forum, and I found out that I cannot have the same component Declared in two places. In my case I had it here:


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [SelectorPage]
})
export class SelectorPageModule {}

And here:

@NgModule({
  declarations: [
    HeaderComponent,
    SelectorPage
  ],
  entryComponents: [
    SelectorPage
  ],
  exports: [
    HeaderComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
  ]
})
export class ComponentsModule { }

So to fix this, I commented out the Declartion in the Compoenents Module:


@NgModule({
  declarations: [
    HeaderComponent//,
//    SelectorPage
  ],
  entryComponents: [
    SelectorPage
  ],
  exports: [
    HeaderComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
  ]
})
export class ComponentsModule { }

Then I was able to generate the APK, no errors:

BUILD SUCCESSFUL in 1m 1s
45 actionable tasks: 42 executed, 3 up-to-date
Built the following apk(s):
        D:\yesApp\side\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

YEAAAH :slight_smile:

But then, when I tried running on the emulator again I can see an error (through Chrome Inspect):

Uncaught Error: Component SelectorPage is not part of any NgModule or the module has not been imported into your module.

So, how to properly fix this issue and generate apk and run on device (emulator in my case) with no problems?

EDIT If I try to do the oposite, like Declare on components.module.ts and import on selector.module.ts, like this:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SelectorPage
  ],
  declarations: []//SelectorPage]
})
export class SelectorPageModule {}

I can run on Emulator, but cant build with this error message:

ERROR in : Unexpected directive 'SelectorPage in D:/yesApp/side/src/app/selector/selector.page.ts' imported by the module 'SelectorPageModule in D:/yesApp/side/src/app/selector/selector.module.ts'. Please add a @NgModule annotation.

:cold_sweat:

2

just remove this and try again

1 Like
3

Thank you for your help.

I removed entryComponents as you suggested, leaving ComponentsModule like this:

@NgModule({
  declarations: [
    HeaderComponent//,
//    SelectorPage
  ],
//  entryComponents: [
//    SelectorPage
//  ],
  exports: [
    HeaderComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
  ]
})
export class ComponentsModule { }

And I was able to run on the emulator no problem and also run the build :slight_smile:
Problem solved. Thank you very very much Gokujy.

4

This broke my feature as discribed here:

:frowning: