Component is part of the declarations of 2 modules in Angular

Question

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.

have you exported the commonmod component in your module ? if yes then you don't have to add commonmod to your declartions[] of other modules. — CruelEngine
you don't have (add component in declarations[]) to as that component has been declared in its module but you have to import that module and add it ti imports[] — CruelEngine
This is the scenario. I have dashboard module(Main Module), employer module, employer module. I have created salary.component.ts. I want to use this component in both of this module. — Chris
where is salary.component.ts declared ? i mean which module ? If it is declared in employer module then add the SalaryComponent to exports[] inside @NgModule({}) and then add the employer module to imports[] of the other module where you want to use the SalaryComponent — CruelEngine

Obaid Obaid · Accepted Answer · 2018-12-28T09:34:37

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.

Component is part of the declarations of 2 modules in Angular

3 Answers