The component is declared by more than one NgModule

Question

So i created a component ExampleComponent and declared it in a module that isnt listed in app.module. Next i want to declare the component ExampleComponent in a module that is listed in app.module. How do i do this? If i simply declare it, than i get the following error: the component ExampleComponent is declared by more than one NgModule.

abc.module.ts

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

app.module.ts

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

new.module

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

Answer 1

If you use your component in multiple modules, it means that this component is shared. You need to create an exclusive module (ExampleModule) for your ExampleComponent, and then import that module wherever you want to use ExampleComponent.

So create ExampleModule:

import { NgModule } from '@angular/core';
import { ExampleComponent} from '../Example/Example.component';
@NgModule({
  declarations: [
    ExampleComponent,
  ],
  exports: [
    ExampleComponent,
  ]
})
export class ExampleModule { }

And then import it where you want to use ExampleComponent (into abc module and app module) like that:

import { ExampleModule } from '../example.module';
@NgModule({
  imports: [
    ExampleModule 
  ]
  ...
})

By defining separate module for your shared component, you provide some encapsulation layer in which you can describe and provide all the needed dependencies for your component to work, so, in the future, all the consumers just need to import the module itself without need to know any information about all these dependencies.

Answer 2

This error occurs in case if the component is being imported in the app.module.ts file instead of the module file.

case study:

I have the folder structure as below:

app 
   src 
     component 
        general.component.ts 
        general.component.html 
        general.component.scss 
        general.component.spect 
        general.module.ts
        general.model.ts 
        general.services.ts
app.module.ts
app.routing.ts

The error "The component is declared by more than one NgModule" will be occuring when

in app.module.ts file if you have imported as below;

import { GeneralComponent } from './component/general/graph.component';

@NgModule({
          declarations: [
           GeneralComponent
          ],
    })

Changes to overcome the issue

1. export the general.component inside general.module.ts as shown below:

general.module.ts

    import { NgModule } from '@angular/core'
    import { CommonModule } from '@angular/common'
    import { GeneralComponent } from './general.component'    
    @NgModule({
      declarations: [GeneralModule.rootComponent],
      imports: [CommonModule],
      exports: [GeneralModule.rootComponent],
      entryComponents: [GeneralModule.rootComponent],
    })
    export class GeneralModule {
      static rootComponent = GeneralComponent
    }

2. In app.module.ts import general.module.ts

app.module.ts

 import { GeneralModule } from './component/graph-general/graph-general.module';
    @NgModule({
      declarations: [
      ],
      imports: [  
         GeneralModule ,
    ]
    }) 
    export class AppModule { 
}

NOTE: Always only components should be in declaration and all modules should be in imports.