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

If your pages is created by using CLI then it creates a file with filename.module.ts then you have to register your filename.module.ts in imports array in app.module.ts file and don't insert that page in declarations array.

eg.

import { LoginPageModule } from '../login/login.module';


declarations: [
    MyApp,
    LoginPageModule,// remove this and add it below array i.e. imports
],

imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
           scrollPadding: false,
           scrollAssist: true,
           autoFocusAssist: false,
           tabsHideOnSubPages:false
        }),
       LoginPageModule,
],

Answer 2

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

import { BrowserModule } from "@angular/platform-browser";
import { ErrorHandler, NgModule } from "@angular/core";
import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular";
import { SplashScreen } from "@ionic-native/splash-screen";
import { StatusBar } from "@ionic-native/status-bar";;

import { MyApp } from "./app.component";
import { HomePage } from "../pages/home/home"; // import the page
import {HomePageModule} from "../pages/home/home.module"; // import the module

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule // declare the module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage, // declare the page
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
  ]
})
export class AppModule {}

Answer 3

IN Angular 4. This error is considered as ng serve run time cache issue.

case:1 this error will occur, once you import the component in one module and again import in sub modules will occur.

case:2 Import one Component in wrong place and removed and replaced in Correct module, That time it consider as ng serve cache issue. Need to Stop the project and start -do again ng serve, It will work as expected.

Answer 4

To surpass this error , you should start by removing all the imports of app.module.ts and have something like this :

            import { BrowserModule } from '@angular/platform-browser';
            import { HttpClientModule } from '@angular/common/http';
            import { ErrorHandler, NgModule } from '@angular/core';
            import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
            import { SplashScreen } from '@ionic-native/splash-screen';
            import { StatusBar } from '@ionic-native/status-bar';

            import { MyApp } from './app.component';


            @NgModule({
              declarations: [
                MyApp
              ],
              imports: [
                BrowserModule,
                HttpClientModule,
                IonicModule.forRoot(MyApp)
              ],
              bootstrap: [IonicApp],
              entryComponents: [
                MyApp
              ],
              providers: [
                StatusBar,
                SplashScreen,
                {provide: ErrorHandler, useClass: IonicErrorHandler}
              ]
            })
            export class AppModule {}

Next edit your pages module , like this :

            import { NgModule } from '@angular/core';
            import { IonicPageModule } from 'ionic-angular';
            import { HomePage } from './home';

            @NgModule({
              declarations: [
                HomePage,
              ],
              imports: [
                IonicPageModule.forChild(HomePage),
              ],
              entryComponents: [HomePage]
            })
            export class HomePageModule {}

Then add annotation of IonicPage before component annotation of all the pages :

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

Then edit your rootPage type to be string and remove the imports of pages (if there is any in your app component )

rootPage: string = 'HomePage';

Then the navigation function should be like this :

 /**
* Allow navigation to the HomePage for creating a new entry
*
* @public
* @method viewHome
* @return {None}
*/
 viewHome() : void
 {
  this.navCtrl.push('HomePage');
 }

You can find the source of this solution here : Component is part of the declaration of 2 modules

Answer 5

As the error says to remove the module AddEvent from root if your Page/Component is already had ionic module file if not just remove it from the other/child page/component, at the end page/component should be present in only one module file imported if to be used.

Specifically, you should add in root module if required in multiple pages and if in specific pages keep it in only one page.

Answer 6

In this scenario, create another shared module in that import all the component which is being used in multiple module.

In shared component. declare those component. And then import shared module in appmodule as well as in other module where you want to access. It will work 100% , I did this and got it working.

@NgModule({
    declarations: [HeaderComponent, NavigatorComponent],
    imports: [
        CommonModule, BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
    ] 
})
export class SharedmoduleModule { }
const routes: Routes = [
{
    path: 'Parent-child-relationship',
    children: [
         { path: '', component: HeaderComponent },
         { path: '', component: ParrentChildComponent }
    ]
}];
@NgModule({
    declarations: [ParrentChildComponent, HeaderComponent],
    imports: [ RouterModule.forRoot(routes), CommonModule, SharedmoduleModule ],
    exports: [RouterModule]
})
export class TutorialModule {
}
imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    SharedmoduleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }