Angular 2 Cannot use directive form a nested module

Question

I am trying to define a directive that would hide elements if a user doesn't have a certain claim.

After i define the directive i declare it in application.module declarations.

The problem is that i am unable to use the directive from a module that is nested inside of application.module. If i use the directive inside a component that is 'next' to application module it works fine, but when i use the directive from a component that is inside of a nested module then it is not recognized by compiler and throws an error and if i declare the directive again compiler throws up again because it is being declared elsewhere.

Answer 1

Declarations are not inherited by nested modules .You need to add your Directive into declarations for each NgModule where you want to use it. Also you can have a wrapper module for your directive like YourDirectiveModule, add your Directive into the declarations and then export them from YourDirectiveModule. Then import your YourDirectiveModule into each NgModule where you want to use it.

@NgModule({
   declarations: [YourDirective],
   exports: [YourDirective]
})
export class YourDirectiveModule { }

And use

@NgModule({
   imports: [ YourDirectiveModule ]
})
export class SomeModule