Component is part of the declarations of 2 modules in Angular

user_9071245 0
Viewed 49428

I have created a component called commonmod.component.ts that I am including in two other modules (abc and def).

abc.module.ts

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

def.module.ts

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

When I redirect one page in abc module to another page in def module, it is throwing me following error.

ERROR Error: Uncaught (in promise): Error: Type commonmod is part of the declarations of 2 modules: abcand def! Please consider moving commonmod to a higher module that imports abc and def. You can also create a new NgModule that exports and includes commonmodthen import that NgModule in abcand def. Error: Type commonmod is part of the declarations of 2 modules: abc and def! Please consider moving commonmodto a higher module that imports abcand def. You can also create a new NgModule that exports and includes commonmod then import that NgModule in abc and def.

angular typescript
3 Answers

A component can be declared in one and only one module. If you try to declare it in more than one modules you'll get this error

Error: Type ... is part of the declarations of 2 (or more) modules:

The solution to this problem is pretty simple. If you need to use a component in more than one modules then add it to the exports array of the module that declared it.

So lets say we have a component named GreetingsComponent thats is declared in a module TestModule and I want to use it in AppComponent that is declared in AppModule. I'll simply add it in the exports array of the TestModule like this

import {NgModule} from '@angular/core';
import {GreetingComponent} from './greeting.component';
@NgModule({
declarations:[GreetingComponent],
exports:[GreetingComponent]
})
export class TestModule
{
}

Now as AppModule has imported TestModule and this way all constructs whether Components, Directive, Pipes etc that are in the exports array of the TestModule shall be automatically available to the AppModule.

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {TestModule} from './test.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, TestModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now you can simply use GreetingsComponent in the AppComponent

  <greetings></greetings>

A working StackBlitz here.

Cheers.

user_10326550

You can't declare a component in more than 1 module. If both modules need it, you need to declare/export your component in a third module and imports this one in abc & def.

@NgModule({
  imports:      [ MainModule ]
})
export class AbcModule { }

@NgModule({
  imports:      [ MainModule ]
})
export class DefModule { }

@NgModule({
  declarations: [ CommonMod ],
  exports:    [ CommonMod ]
})
export class MainModule { }
user_93957720

This may also occur if you are using HMR (Hot Module Replacement) with Angular 9+. The Angular team is working on it.

See this issue for more details and updates.

user_17567210
Related