Component is part of the declaration of 2 modules

Question

I try to build an ionic 2 app. When I try the app in the browser with ionic serve or launch it on an emulator everything works fine.

But when I try to build it every

Answer 1

I had the same error but I discovered that when you import an AddEventModule, you can't import an AddEvent module as it would present an error in this case.

Answer 2

Solved it -- Component is part of the declaration of 2 modules

1. Remove pagename.module.ts file in app
2. Remove import { IonicApp } from 'ionic-angular'; in pagename.ts file
3. Remove @IonicPage() from pagename.ts file

And Run the command ionic cordova build android --prod --release its Working in my app

Answer 3

Solution is very simple. Find *.module.ts files and comment declarations. In your case find addevent.module.ts file and remove/comment one line below:

@NgModule({
  declarations: [
    // AddEvent, <-- Comment or Remove This Line
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
})

This solution worked in ionic 3 for pages that generated by ionic-cli and works in both ionic serve and ionic cordova build android --prod --release commands!

Be happy...

Answer 4

Had same problem. Just make sure to remove every occurrence of module in "declarations" but AppModule.

Worked for me.

Answer 5

You may just try this solution ( for Ionic 3 )

In my case, this error happen when i call a page by using the following code

 this.navCtrl.push("Login"); // Bug

I just removed the quotes like the following and also imported that page on the top of the file which i used call the Login page

this.navCtrl.push(Login); // Correct

I can't explain the difference at this time since i'm a beginner level developer

Answer 6

Some people using Lazy loading are going to stumble across this page.

Here is what I did to fix sharing a directive.

1. create a new shared module

shared.module.ts

import { NgModule, Directive,OnInit, EventEmitter, Output, OnDestroy, Input,ElementRef,Renderer } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SortDirective } from './sort-directive';

@NgModule({
  imports: [
  ],
  declarations: [
  SortDirective
  ],
  exports: [
    SortDirective
  ]
})

export class SharedModule { }

Then in app.module and your other module(s)

import {SharedModule} from '../directives/shared.module'
...

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }