Declaration of directive or component in defferent modules, angular 4

Question

Is it possable to declare one directive/component for many modules? I can export only one:

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[appBigText]' })
export class BigTextDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.fontSize = '100px'
  }
}


module one:

import { BigTextDirective }   from '../common/directives/dir225';
@NgModule({
  imports: [HttpModule...........
  
  providers :[homeService],
  declarations: [
    HomeComponent,
    DetailComponent,
    BigTextDirective
  ]

component:
import { BigTextDirective }   from '../common/directives/dir225';

@Component({
  selector: 'my-app',
  template: `
<router-outlet></router-outlet>
  <div appBigText>This text is huge.</div>.
  `
})

module two is same inculding, but i have error

Error: Type BigTextDirective is part of the declarations of 2 modules: HomeModule and NotesModule! Please consider moving BigTextDirective to a higher module that imports HomeModule and NotesModule. You can also create a new NgModule that exports and includes BigTextDirective then import that NgModule in HomeModule and NotesModule.

SirWojtek SirWojtek · Accepted Answer · 2017-08-20T12:55:31

In case you need using the same component/directive in multiple modules, it means that it's common. So why don't follow error suggestion and extract BigTextDirective to separate module and export it?

NgModule({
  // ...
  providers: [
    BigTextTexture
  ]
  exports: [
    BigTextTexture
  ]
})
export class CommonModule {}

So you can easily re-use it in high-level modules just by importing it:

@NgModule({
  imports: [
    CommonModule
  ],
  declaration: [
    INeedBigTextTextureComponent
  ]
})
export class HighLevelModule {}

Let Angular helps you with code organization!

Declaration of directive or component in defferent modules, angular 4

1 Answers