Ionic build --prod error: Type ... in ... is part of the declarations of 2 modules:

[DiegoGuimaDev]

I am received a error when i use build --prod

Error

I already try import ChatItemModule and remove ChatItem of declarations, but the new error occour:

someone know shomething about this ?

[nauvalazhar]

did you have item.module.ts file?

[subhash-ztech]

You cannot declare any component in more than one single ngModule.

The solution for your first error is as follows:
Declare the ‘ChatItem’ component in either AppModule or ChatItemModule, but not in both of them.

[dattaraj]

I had same error - remove ChatModule from @NgModules - declarations. Keep only in imports.

[killerchip]

I run into the same issue, and I resolved it…

But keep in mind that in order to create my Component, I run from command-line:

ionic g component MyComponent

So the command-line generator probably does do the job correctly, and misleading the developer.
Is this a bug?

Regards
Costas

[Sujan12]

What did you do additionally to ionic g component?
If nothing, then this is definitely a bug that should be reported at https://github.com/ionic-team/ionic-cli/issues

[sebafra]

Yes but when you run ionic serve the following error appear:

Component is not part of any NgModule or the module has not been imported into your module. ; Zone: <root> ; Task: Promise.then ; Value: Error: Component ContratistasLista is not part of any NgModule or the module has not been imported into your module.

[arnoldparge]

1. Delete ChatItem.Module.ts from the ChatItem folder
2. In ChatItem.ts remove IonicPage

I think this should solve your problem.

I solved my from this!

[monoko26333]

infolder ChatItem
1.delete chatitem.module.ts
2.in chatitem.ts delete import{ Ionicpage } from ‘ionic-angular’;
3.in chatitem.ts delete @Ionicpage()
4.in terminal >ionic cordova build android --prod OR ionic cordova build ios --prod

[sebafra]

Thanks @monoko26333 and @arnoldparge
This solve the issue!!!

[Onizuka21]

This made the trick!

[johnyj]

I think we should do in ionic way / angular for Page instead deleting, you could do this:

1. in some.module, add exports and entryComponents

@NgModule({
declarations: [SomePage],
imports: [IonicPageModule.forChild(SomePage)],
exports: [SomePage],
entryComponents: [SomePage]
})

2. edit app.module, now we only need to import module, no need to add declarations or entryComponents

@NgModule({
imports: [
…
SomePageModule,
…

Don’t know why ionic-cli not added this when generate page.
Sadly, whenever generating page, i’m always redo this

[Profihorst1]

This is how i fixed it:

1. Remove all pages from imports: [ ... ] in app.module.ts.
2. Remove all pages from entryComponents: [..] in app.module.ts.
   NOTE: Do not delete the generated mypage.module.ts files.**
3. Add the generated module files to imports: [ ... ] in app.module.ts.

Here’s a full example of my app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { PlanProvider } from '../providers/plan/plan';
import { ExerciseProvider } from '../providers/exercise/exercise';
import { TabsPageModule } from '../pages/tabs/tabs.module';
import { TrainingPageModule } from '../pages/training/training.module';
import { PlansPageModule } from '../pages/plans/plans.module';
import { CloudPageModule } from '../pages/cloud/cloud.module';
import { CreatePlanPageModule } from '../pages/create-plan/create-plan.module';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule,
    TabsPageModule,
    TrainingPageModule,
    PlansPageModule,
    CloudPageModule,
    CreatePlanPageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    IonicStorageModule,
    PlanProvider,
    ExerciseProvider
  ]
})
export class AppModule {}

[altergothen]

Generate a page creates a module for lazy-loaded pages in ionic3
If you don’t want to take advantage of lazy loading use
$ ionic generate [type] [name] --no-module // Do not generate an NgModule for the component

Ionic Framework

[gonrah]

As far as I know @altergothen is right. The page-name.module.ts file and @IonicPage decorator are used for lazy loading and if you want to take advantage of it you should keep both of them.

You can learn more about Lazy Loading with Ionic in this article from the official blog - https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/

I think the point of Lazy Loading is not to declare these pages in app.module.ts in any form. They will be loaded on demand the first time you need them. You have to change all occurrences of the page to strings and Ionic will handle the rest. In the blog post mentioned above there are links to example projects where you can see how it should be.

[buda701]

YES, Si eliminado loe Module.ts and eliminado @IonicPage() … Todo OK

[Runfast]

Thanks, It works now.
But why the cli create this component.module.ts if we have to delete it in order to build without error ?

[ToughBastahD]

Thank you!!! This worked for me and it saved me a lot of time!!!

[anespa]

Dear Friends,
Don’t avoid lazy loading its an advanced feature of ionic 3 to make the performance better .
In Your app.module.ts you do only two editing for a page
Suppose your new page module is ‘BuidingStatusPageModule’

then
import same as normal

import { BuildingStatusPageModule } from “…/pages/building-status/building-status.module”;

then add

imports: [
   BuildingStatusPageModule,

Done . Your problem will solve…

Try it and enjoy.

Thanks

Anes