Component is part of the declarations of 2 modules in Angular
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.
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 { }