Directive doesn't work in a sub module

Question

I can't make the directive work in a lazy loaded module. I've read the documentation and I simply added the directive into declarations array of my main module. The directive works as expected at that module, but it doesn't work in lazy loaded modules. It even prevents lazy loaded module to be opened because of the template error:

Can't bind to 'myHighlight' since it isn't a known property of 'p'

Here's my Plunker.

Check out errors in console after clicking 'go to child'

Answer 1

I faced with similar problem in our project. I had shared.module but it still threw an error

Can't bind to 'pathForUploading' since it isn't a known property of 'div'

I had this code

<div class="avatar"
     fileUploader
     [pathForUploading]="'path'"
     (onFileUploaded)="updateAvatar()"></div>

And it's gone after changing attribute calling to

pathForUploading="path"

Hope it will help somebody

Answer 2

That's because your directive is declared in AppModuleand it's only available there. If you want to use directive in both modules, you can create SharedModule and then declare and export directive from there, and then import SharedModule in your AppModule and your ChildModule:

@NgModule({
  declarations: [ HighlightDirective ],
  exports: [ HighlightDirective ]
})

export class SharedModule {}

Now you just need to add SharedModule to AppModule's and ChildModule's imports.

Note:

You have to remove your directive from AppModule's declarations since it can only be declared once.