Angular 12 Component declared by more than one module

Few months ago, I encountered an error called “component declared by more than one NgModule”. 

Today, I am going to explain and solve this issue. Actually, as we know that typescript is a standardized version of vanilla JavaScript. We need to follow typescript standards while developing so that we could minimize the run time bugs and errors.

Here the concept of Shared Module comes to the picture. We can share components, directive and pipes via a shared ngModule.

Let’s get our hands dirty with some code.

ng generate module form –routing

ng generate module show –routing

ng generate component form

ng generate component show

ng generate component notification

ng generate component header

Now if we just declare the notification and header component in the both form and show modules. It will throw an error :

“The component ___ declared by more than one NgModule”

, 

To solve this issue

We can use the shareModule concept, it says that if you need to use some components, pipes or directives in more than one NgModule then you can create an independent module which is called share module and then declare these components, pipes and directives there. And don’t forget to export these components too, just add these components to the export array of NgModule. 

After this you can import this module to another module where you want to reuse these components.

FormModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from './form.component';
import { FormRoutingModule } from './form-routing.module';
import { SharedModule } from '../shared.module';
import { ReactiveFormsModule } from '@angular/forms';
 
@NgModule({
 declarations: [
   FormComponent
 ],
 imports: [
   CommonModule,
   FormRoutingModule,
   ReactiveFormsModule,
   SharedModule
 ]
})
export class FormModule { }

ShowModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShowComponent } from './show.component';
import { ShowRoutingModule } from './show-routing.module';
import { SharedModule } from '../shared.module';
 
 
 
@NgModule({
 declarations: [
   ShowComponent
 ],
 imports: [
   CommonModule,
   ShowRoutingModule,
   SharedModule
 ]
})
export class ShowModule { }

So, let’s create a share module

ng generate module shared

It will generate the sharedModule class with @NgModule decorator which allows us to declare components, import modules and also export the components for reuse purpose.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { NotificationComponent } from './notification/notification.component';
 
 
 
@NgModule({
 declarations: [
   HeaderComponent,
   NotificationComponent
 ],
 imports: [
   CommonModule
 ],
 exports: [
   HeaderComponent,
   NotificationComponent
 ]
})
export class SharedModule { }

Hope it will help you, if you have any query or suggestions, plz feel free to comment below.