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'

Nysa

It is mentioned in documentation, but I don't understand as in main module, directive is well declared... angular.io/docs/ts/latest/guide/… – Lug

Clarify the problem, or may be it's another problem? When you post a link to the code make sure the problem code is accompanied the question. – Tearing

@RomanC Sorry for poor explanation. I've edited the question. – Nysa

Answer 1

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.

Schweiker

But shouldn't the declarations declared in the AppModule be available globally throughout the app? – Angi

@echonax No, the only way to make anything globally available is the one I described, at least at this moment. – Schweiker

Answer 2

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

Jaela

I get No provider for TemplateRef! when I use it without the * – Mulct