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 create 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 don't know how.

If I remove the declaration from AppModule I get an Error that the Login Page is not found, while running ionic serve

score 212 · Accepted Answer · edited Sep 23 '19 at 18:26

212

Remove the declaration from AppModule, but update the AppModule configuration to import your AddEventModule.

.....
import { AddEventModule } from './add-event.module';  // <-- don't forget to import the AddEventModule class

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    //AddEvent,  <--- remove this
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config),
    AddEventModule,  // <--- 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

edited Sep 23 '19 at 18:26

Seymour

7,043
12
44
51

answered Apr 24 '17 at 22:04

snorkpete

14,278
3
40
57

hey thanks for your answer, do i have to also change my imports to { AddEventModule } from '../pages/add-event/add-event.module';? Because both, with and without the import an error is thrown – Stevetro Apr 24 '17 at 22:16
in AppModule, you have to include an additional import for AddEventModule. I'll update the answer – snorkpete Apr 24 '17 at 22:20
If i add everything the error "Error encountered resolving symbol values statically. Could not resolve add-event.module relative to resolving symbol AddModule" is thrown – Stevetro Apr 24 '17 at 22:30
1

what folder is the file 'add-event.module.ts' in? – snorkpete Apr 24 '17 at 22:48
In the same Folder like AddEvents, so i used ''../pages/add-event/add-event.module'; the page was generated by ionic g page – Stevetro Apr 24 '17 at 22:50
well, your import of AddEventModule has to use a proper path relative to the location of AppModule. If you indicate what your folder structure is (specifically the folder structure for the folders that hold AppModule and AddEventModule, you can probably be guided as to what that relative path is – snorkpete Apr 24 '17 at 22:53
So the add-events.module.ts is in the same Folder as the add-event.ts and the path to this is '../pages/add-event/add-event' so Everything should be correct – Stevetro Apr 24 '17 at 22:57
remember that you are trying to access add-event.module from *app.module* - so you have to construct a path to add-event.module.ts starting from *app.module.ts* – snorkpete Apr 24 '17 at 22:59
ok i realy dont know why it doesnt work yesterday, but today i did excactly the same and now error is shown x). thx for the help – Stevetro Apr 25 '17 at 17:30
your computer was trying to tell you "that's enough for today!" – snorkpete Apr 25 '17 at 18:32
Unexpected directive 'About in /root/Desktop/ionic_apps/shop/src/pages/about/about.ts' imported by the module 'AppModule in /root/Desktop/ionic_apps/shop/src/app/app.module.ts'. Please add a @NgModule annotation. this error occurred when i tried to implement the same code for About module. – OshoParth Jul 31 '17 at 17:44
i am deleting pagename.module.ts file from everypage and commenting //@IonicPage() in every page.ts , is this ok ? – user2828442 Dec 27 '17 at 15:07
AddEvent component is there in entryComponents.Is it required here or Can we remove it from there ? – Venkat Feb 22 '19 at 08:04
@Venkat, with respect to the original question, AddEvent component being in entryComponents is irrelevant. Whether it's necessary to have AddEvent component in entryComponents depends on how you're using AddEvent. If you use the AddEvent component solely by adding its tag/selector in another component's template, then no, you won't need it in entryComponents. But if you don't use the AddEvent selector anywhere in your other components' template code, then the Angular compiler has no way of knowing AddEvent component exists, so then you need to add it to entryComponents. – snorkpete Feb 24 '19 at 06:48
thanks that worked. I think this way we can access all of the components that have been declared in that module right? – Hossein Mousavi Apr 14 '20 at 11:44

Tom Stickel · Answer 2 · 2019-12-04T22:38:53.397

56

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 { }

edited Dec 04 '19 at 22:38

answered May 20 '18 at 06:04

Tom Stickel

19,633
6
111
113

why not adding it directly to app.module? Or maybe to a core.module if you are going to import it from app.module – Dani Nov 08 '18 at 23:12
6

This is perfect! I have one addition to it... You will need to add IonicPageModule.forChild(SharedModule) to ShareModule's Imports. I was getting all kinds of weird issues till I did that. – Adway Lele Jan 07 '19 at 14:16

score 17 · Answer 3 · answered Jan 22 '18 at 15:23

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

score 6 · Answer 4 · answered Mar 23 '18 at 11:36

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,
],

score 5 · Answer 5 · answered Nov 13 '17 at 07:21

5

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.

answered Nov 13 '17 at 07:21

gnganapath

917
12
16

Case 1 was the issue in my case, SOLVED! – Prem popatia Sep 11 '18 at 14:38

score 2 · Answer 6 · answered Aug 16 '18 at 09:58

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

score 1 · Answer 7 · answered Oct 17 '17 at 18:43

1

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.

answered Oct 17 '17 at 18:43

Jaime Yule

981
1
11
20

score 1 · Answer 8 · answered Nov 20 '17 at 14:48

1

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

answered Nov 20 '17 at 14:48

sijo vijayan

1,590
1
21
34

5

you stopped using lazyloading my friend google it its important – George Jan 23 '18 at 12:27

score 1 · Answer 9 · answered Feb 16 '18 at 10:32

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 {}

Ouahib Abdallah · Answer 10 · 2018-03-06T11:42:40.290

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

David Vareka · Answer 11 · 2020-04-03T12:43:56.290

1

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

Worked for me.

edited Apr 03 '20 at 12:43

answered Aug 23 '18 at 17:52

David Vareka

252
2
6

score 0 · Answer 12 · edited May 03 '18 at 05:48

0

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

edited May 03 '18 at 05:48

Pradeep

9,667
13
27
34

answered May 03 '18 at 04:35

Kavinda Jayakody

705
1
13
25

score 0 · Answer 13 · answered Sep 07 '18 at 08:51

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.

score 0 · Answer 14 · answered May 12 '19 at 01:54

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.

score 0 · Answer 15 · edited Sep 29 '19 at 18:17

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 { }

this code has been tested in angular and working perfectly – Sarad Vishwakama Aug 31 '19 at 18:30 — Sarad Vishwakama, Aug 31 '19 at 18:30

score -3 · Answer 16 · edited Aug 16 '17 at 06:23

-3

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.

edited Aug 16 '17 at 06:23

dat3450

954
3
13
27

answered Aug 16 '17 at 04:09

user8470307

1

Component is part of the declaration of 2 modules

16 Answers16

You may just try this solution ( for Ionic 3 )

Linked

Related