Lazy load directives [RESOLVED]

My app has both eager-load and lazy-load modules and both kind of modules need access to common directives. I declare the directive in app.module.ts,

If I do not declare the directive again in a lazy loaded component. I get
Can't bind to DIRECTIVE_NAME since it isn't a known property of COMPONENT_NAME

If I declare the directive again in a lazy loaded component. I get
Type DIRECTIVE_NAME is part of the declarations of 2 modules

What should I do?

Make a module for your directive that looks like so:

@NgModule({
  declarations: [TestDirective],
  exports: [TestDirective],
})
export class TestDirectiveModule {}

And import it both in your app module and in the lazy page modules that need it.

2 Likes

Thanks for the solution.

Where i have to import in Both