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 direct

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.