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 time the error  ionic-app-script tast   build  Error Type AddEvent in  PATH  add event ts is part of the declarations of 2 modules  AppModule in  PATH  app modules ts and AddEvent in  PATH  add-event module ts  Please consider moving AddEvent in  PATH  add-event ts to a higher module that imports AppModule in  PATH  app module ts and AddEventModule  You can also creat a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule   my AppModule is   import   NgModule  ErrorHandler   from   angular core   import   BrowserModule   from   angular platform-browser   import   IonicApp  IonicModule  IonicErrorHandler   from  ionic-angular   import   AngularFireModule   from  angularfire2   import   MyApp   from    app component   import   Eventdata   from     providers eventdata   import   AuthProvider   from     providers auth-provider   import   HttpModule   from   angular http    import   HomePage   from     pages home home   import   Login   from     pages login login   import   Register   from     pages register register   import   AddEvent   from     pages add-event add-event   import   EventDetails   from     pages event-details event-details    import   StatusBar   from   ionic-native status-bar   import   SplashScreen   from   ionic-native splash-screen      NgModule     declarations        MyApp      HomePage      Login      Register      AddEvent      EventDetails         imports        BrowserModule      IonicModule forRoot MyApp       HttpModule      AngularFireModule initializeApp config         bootstrap   IonicApp     entryComponents        MyApp      HomePage      Login      Register      AddEvent      EventDetails        providers        StatusBar      SplashScreen       provide  ErrorHandler  useClass  IonicErrorHandler   Eventdata  AuthProvider        export class AppModule      and my add-event module ts is  import   NgModule   from   angular core   import   IonicPageModule   from  ionic-angular   import   AddEvent   from    add-event     NgModule     declarations        AddEvent         imports        IonicPageModule forChild AddEvent          exports        AddEvent        export class AddEventModule      I understand that I have to remove one of the declarations  but I dont know how   If I remove the declaration from AppModule I get an Error that the Login Page is not found  while running ionic serve

User · Answer

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

User · Answer

Solved it -- Component is part of the declaration of 2 modules    Remove pagename module ts file in app Remove import   IonicApp   from  ionic-angular   in pagename ts file Remove  IonicPage   from pagename ts file    And Run the command ionic cordova build android --prod --release its Working in my app

User · Answer

Simple fix   Go to your app module ts file and remove comment everything that binds with add event  There is no need of adding components to the App module ts which are generated by the ionic cli because it creates a separate module for components called components module ts    It has the needed module component imports

User · Answer

Some people using Lazy loading are going to stumble across this page   Here is what I did to fix sharing a directive    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

User · Answer

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

User · Answer

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

User · Answer

Had same problem  Just make sure to remove every occurrence of module in  declarations  but AppModule   Worked for me

User · Answer

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   lt -- 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Remove the declaration from AppModule  but update the AppModule configuration to import your AddEventModule         import   AddEventModule   from    add-event module        lt -- don t forget to import the AddEventModule class   NgModule     declarations        MyApp      HomePage      Login      Register        AddEvent    lt --- remove this     EventDetails         imports        BrowserModule      IonicModule forRoot MyApp       HttpModule      AngularFireModule initializeApp config       AddEventModule       lt --- add this import here        bootstrap   IonicApp     entryComponents        MyApp      HomePage      Login      Register      AddEvent      EventDetails        providers        StatusBar      SplashScreen       provide  ErrorHandler  useClass  IonicErrorHandler   Eventdata  AuthProvider        export class AppModule      Also   Note that it s important that your AddEventModule exports the AddEvent component if you want to use it outside that module  Luckily  you already have that configured  but if it was omitted  you would ve gotten an error if you tried to use the AddEvent component in another component of your AppModule

User · Answer

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

User · Answer

This module is added automatically when you run ionic command  However it s not necessery  So an alternative solution is to remove add-event module ts from the project

User · Answer

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

User · Answer

I accidentally created my own component with the same name as a library s component   When I used my IDE to auto-import the library for the component  I chose the wrong  library   Therefore this error was complaining  that I was re-declaring the component    I fixed by importing from my own component s code  instead of the library   I could also fix by naming differently  avoid ambiguity

[angular] Component is part of the declaration of 2 modules

Examples related to angular

Examples related to build

Examples related to ionic2

Examples related to declaration

Examples related to ionic3