Ionic-cli: Component is part of the declarations of 2 modules Error- CLI 3.8

[Sampath-Lokuge]

[X ] 3.x
[ X] bug report

Current behavior:

> ionic cordova run android --prod --device

[INFO] Enabling Cordova integration.
> ionic config set integrations.cordova {} --json --force
[OK] integrations.cordova set to {} in .\ionic.config.json!
[WARN] Detected @ionic/cli-plugin-cordova in your package.json.

       As of CLI 3.8, it is no longer needed. You can uninstall it.

Running app-scripts build: --prod

[12:42:25]  build prod started ...
[12:42:25]  clean started ...
[12:42:25]  clean finished in 31 ms
[12:42:25]  copy started ...
[12:42:25]  ngc started ...
Error: Type CategoryComponent in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.ts is part of the dec
larations of 2 modules: ComponentsModule in D:/Freelance Work/MediaApp/MediaApp/src/components/components.module.ts and Cat
egoryComponentModule in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.module.ts! Please consider mov
ing CategoryComponent in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.ts to a higher module that im
ports ComponentsModule in D:/Freelance Work/MediaApp/MediaApp/src/components/components.module.ts and CategoryComponentModu
le in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.module.ts. You can also create a new NgModule th
at exports and includes CategoryComponent in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.ts then i
mport that NgModule in ComponentsModule in D:/Freelance Work/MediaApp/MediaApp/src/components/components.module.ts and Cate
goryComponentModule in D:/Freelance Work/MediaApp/MediaApp/src/components/category/category.module.ts.

Expected behavior:

Why can't I do that? I have done this with earlier CLI.It is fine just a warning.But it stops the build completely.

Steps to reproduce:

I have created a category component with a module like this:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { CategoryComponent } from "./category";


@NgModule({
    declarations: [
        CategoryComponent,
    ],
    imports: [
        IonicModule,
    ],
    exports: [
        CategoryComponent
    ]
})
export class CategoryComponentModule { }

After that, I have imported it on 2 pages as shown below.

_media-library.module.ts_

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MediaLibraryPage } from './media-library';
import { CategoryComponentModule } from "../../components/category/category.module";

@NgModule({
  declarations: [
    MediaLibraryPage,
  ],
  imports: [
    IonicPageModule.forChild(MediaLibraryPage),
    CategoryComponentModule
  ],
})
export class MediaLibraryPageModule { }

_products.module.ts_

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductsPage } from './products';
import { CategoryComponentModule } from "../../components/category/category.module";

@NgModule({
  declarations: [
    ProductsPage,
  ],
  imports: [
    IonicPageModule.forChild(ProductsPage),
    CategoryComponentModule
  ],
})
export class ProductsPageModule { }

It is working fine when I use Ionic serve. But it gave above error when I used this ionic cordova run android --prod --device. Please see that.

Ionic info:

@ionic/cli-utils : 1.8.0
ionic (Ionic CLI) : 3.8.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 25.2.5
Node              : v6.10.0
npm               : 3.10.10
OS                : Windows 8.1

[imhoffd]

I can't speak much to this, but does this solution work for you? https://stackoverflow.com/a/43598443

If not, please open an issue for Ionic Angular build-related problems in this repo: https://github.com/ionic-team/ionic-app-scripts

[Sampath-Lokuge]

Thanks @dwieeb
Actually, the problem was this.According to the official blog where I have created Module per Component. But Latest CLI has created shared module for all the components inside the components.module.ts file.That is the default behavior right now on the latest CLI.Earlier it was not.So due to that above error came.The solution is for this was to remove the components module details from the components.module.ts.Then no issues.

My feeling is, this is really BAD. That option must give to the developer. Because let's think about the use case where if we have a lot of components.But we just need to use one component inside the particular Page.What will happen according to default behavior now? It'll import all the components into that page. How BAD that is when we consider the performance of that page.

Please let me know where should I post this details? Thanks.

[aizakausar]

In updated Ionic script when you add pages with the cli then you don’t need to add page imports in app.module.ts file. When i removed imports from app.module.ts file the problem was gone.

[melhergui]

This answer resolved and explained to me: https://stackoverflow.com/questions/43598311/component-is-part-of-the-declaration-of-2-modules

[0x1ad2]

Since the Ionic 3.6.0 release every page generated using Ionic-CLI is now an Angular module.
This means you've to add the module to your imports in the file src/app/app.module.ts

[gokujy]

try this This answer resolved : - https://stackoverflow.com/a/52703969/9088454