NullInjectorError: No provider for ElementRef

Question

I created an internal directive in a module in my project (Angular 8 + Material Design). Following tuto and official doc.

@Directive({
  selector: '[button-confirmation]'
})
export class ButtonConfirmationDirective {

  @Output('bc-confirm')
  confirmAction = new EventEmitter<any>();

  @Input('bc-options')
  options: Option[] = [...];

  constructor(
    private el: ElementRef,
    private confirmationService: ConfirmationService
  ) { }

  @HostListener('mouseup') onMouseUp() {
    this.confirmationService.displayConfirm(this.el, this.options, this.confirmAction);
  }

}

Ok, it's work. BUT, when i create an external library and move my directive (with components, services, ...) i got the error :

ERROR NullInjectorError: "StaticInjectorError(AppModule)[ButtonConfirmationDirective -> ElementRef]: 
  StaticInjectorError(Platform: core)[ButtonConfirmationDirective -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!"

The lib created from a ng new fop-common -S followed by ng g library fop-common then i cleaned my lib folder keeping the module.ts and adding my directive/components/services...

The button-confirmation.module.ts

@NgModule({
  declarations: [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ],
  imports: [
    CommonModule,

    MatButtonModule,
    MatIconModule,
    MatTooltipModule
  ],
  providers: [
    ConfirmationService,
    DomService
  ],
  exports: [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ],
  entryComponents: [
    ButtonConfirmationComponent
  ]
})
export class ButtonConfirmationModule { }

The fop-common.module.ts looks like

@NgModule({
  declarations: [
    JoinPipe
  ],
  imports: [],
  exports: [
    JoinPipe,
    ButtonConfirmationModule
  ]
})
export class FopCommonModule { }

And in my project, i import it

  imports: [
...
    FopCommonModule
  ],

For the installation of the lib i used the local way (private project without npm) : npm install ../fop-common/dist/fop-common --save

I already have interfaces and pipes working, so globally it's working, but just have the ElementRef problem, but found nothing for this case (except old solution for < 8 with symlink parameter, but not working off course).

Any help appreciate. Thanks in advance.

Answer 1

"paths": {
    "@angular/*": [
        "./node_modules/@angular/*"
    ]
}

Make the paths mapping in the application's tsconfig (where you are linking to the library) and not the library one.

Answer 2

For the installation of the lib i used the local way (private project without npm) : npm install ../fop-common/dist/fop-common --save

Usually you do not have to do this. When you did ng g library fop-common, it should have created an alias path in your tsconfig.json in the project and you just need to import your lib using import {...} from 'fop-common';

I'm not sure it's the problem but I already had some issues when trying to install dependencies locally.