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/*"
    ]
}

paths在应用程序的 tsconfig（链接到库的位置）而不是库中进行映射。

Answer 2

没有找到解决办法。

我将代码（仅而不是 lib 上下文）放回项目中，而不是创建一个 lib，但我将两个 git 存储库分开以供重用。

因此，技巧是添加一个安装后脚本来创建一个 /src/libsubfolder，其中包含“lib”存储库（git clone），编辑主项目 .gitignore 以添加此 libsubfolder，然后您就有了一个“有效”的技巧解决方案。

为了更轻松，我编辑了 tsconfig.json 以添加路径配置来映射 libsubfolder，以便通过主项目进行所有导入。

因此，我避免将所有项目放在同一个存储库（角度/项目文件夹）中，我使其可维护、可重用且易于部署，并且每个项目都有自己的存储库。所以这对我来说没问题。

感谢那些试图提供帮助的人。