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.

Answer 1

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.