Can't bind to Directive('appHasAccess') since it isn't a known property of 'input'

Question

I created a custom attribute directive library package and install into myProject and when I tried to use this custom directive throws an error.

ERROR Error: Uncaught (in promise): Error: Template parses errors: Can't bind to 'appHasAccess' since it isn't a known property of 'input'.

code that I used is as below:

all possible try I have done. any have an idea how I resolve this.

1. Directive: HasAccessDirective.ts

@Directive({
  selector: '[appHasAccess]',
})

export class HasAccessDirective {

accessDetail = { 'a': 1 }
 @Input('appHasAccess') set appHasAccess(accessDetail: any) {
    // Based on right control enable/disable
    this.eleRef.nativeElement.disabled = this.appRights.hasRights(accessDetail);
}
constructor(private eleRef: ElementRef,
    private appRights: MyService) { }
}

2. Module: DigiUserRightsModule.ts

   @NgModule({
        declarations: [
            HasAccessDirective
        ],
        imports: [
            CommonModule,
            HttpClientModule,
        ],
        exports: [
            HasAccessDirective
        ],
        providers: [UserRightsService]
    })

export class DigiUserRightsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DigiUserRightsModule,
            providers: [UserRightsService]
        };
    }
}

Answer 1

I did the following changes to make it work. I injected my directive module to my user-module instead of app-module. user-module is lazyloaded on a route it loads and it's working fine.

• Set my directive package module at user module:

  import { NgModule }      from '@angular/core';       
  
  @NgModule({
     declarations: [],
     imports: [
         DigiUserRightsModule.forRoot()
     ],
     providers: []
  })
  
  export class UserModule {}