Angular 6 directive is not initialized when placed in lazy loaded module's component

Question

Very new to Angular 6.

I have declared a directive in AppModule and in the appComponent template if I apply that directive it works, In the app component there is a router outlet in which a lazy loaded module gets loaded at very beginning.

Now if I want to apply the directive in any component template of the lazyloaded module, the directive is not being initialized. The directive is an attribute directive and I have declared it properly and used too because inside app component it's working fine.

Not getting any clue, please help.

Answer 1

I see there is an issue with your design. Instead of having your directive in the AppModule , create a SharedModule and then implement the directive in there. Import SharedModule everywhere else in your app. This way you can access your directive from external components (from other modules).

Make sure you declare and export it inside SharedModule

I thought if anything declared in app module should be available to all modules

No this is not correct, Child modules does not know what you have inside the AppModule . ChildModule 's are just another independent modules like AppModule . You could have simply exposed AppModule to ChildModule , but that might cause the circular dependency. That is the reason you have to make use of SharedModule

Answer 2

If we create directives in the feature module/shared module make sure that we need to have them put in the declaration section and export section. import this feature/shared module where it is used.