CODEWITHSUNDEEP
angular
Stanislav Pyshevskyi
Stanislav Pyshevskyi

Reputation: 1071

Angular2 - Declaring a component in two different modules

I create DynamicForm component connect it in two NgModule. 

//  Module 1
@NgModule({
    imports: [],
    exports: [],
    declarations: [
        DynamicForm
    ],
    providers: []
})

//  Module 2
@NgModule({
    imports: [],
    exports: [],
    declarations: [
        DynamicForm
    ],
    providers: []
})

But project dont work, any errors. When I remove DynamicForm from one of NgModule get error that I need include this component. Also I tryed connect DynamicForm to app.module and remove from NgModule and also did't work.

What to do?

Upvotes: 5

Views: 2334

Answers (2)

akhouri
akhouri

Reputation: 3165

Extending on user: @peeskillet answer

Two ways of declaring a component in two different modules:

  1. As suggested in the @peeskillet answer, create a shared module and declare your component (and any other shared components) there and then import the shared module in the another module where you want to use the shared component as a dependency.

  2. Create a separate module for the dependent component itself, and import the component module in the another module where you want to use the shared component as a dependency. The advantage of doing this is that you just importing what you want and not the other components from the shared modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [MyComponent],
  declarations: [MyComponent]
})
export class MyComponentModule { }

Upvotes: 0

Paul Samsotha
Paul Samsotha

Reputation: 209132

Components can only be part of one module. For this reason, if you have a component that should be used by multiple modules, create a shared module, declare it there, then export so others can use it. Then import that shared module into the module where you need that component

@NgModule({
  declarations: [
    DynamicForm
  ],
  exports: [
    DynamicForm
  ]
})
export class SharedModule {}

@NgModule({
  imports: [ SharedModule ]
})
class ModuleThatNeedsDynamicForm {}

Upvotes: 5

Related Questions