NullInjectorError: No provider for ElementRef

Question

我在项目的模块中创建了一个内部指令（Angular 8 + Material 设计）。关注tuto和官方文档。

@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);
  }

}

好的，开始了。但是，当我创建一个外部库并移动我的指令（使用组件、服务等）时，我得到了错误：

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

从 ng new fop-common -S 创建的库，然后是 ng g library fop-common 然后我清理了我的 lib 文件夹，保留了 module.ts 并添加了我的 directive/components/services...

确认按钮。module.ts

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

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

fop-common.module.ts看起来像

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

在我的项目中，我导入它

  imports: [
...
    FopCommonModule
  ],

对于 lib 的安装，我使用了本地方式（没有 npm 的私人项目）：npm install ../fop-common/dist/fop-common --save

我已经有接口和管道在工作，所以在全球范围内它在工作，但只是有 ElementRef 问题，但在这种情况下没有找到任何东西（除了 < 8 的带有符号链接参数的旧解决方案，但不能正常工作）。

感谢任何帮助。提前致谢。

Answer 1

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

通常您不必这样做。当您执行 ng g library fop-common 时，它应该已经在您的 tsconfig.json 项目中创建了一个别名路径，您只需要使用 import {...} from 'fop-common';

导入您的库

我不确定这是问题所在，但我在尝试在本地安装依赖项时已经遇到了一些问题。

Answer 2

未找到解决方案。

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

所以诀窍是添加一个安装后脚本来创建一个 /src/libsubfolder，里面有 "lib" 回购（git 克隆），编辑主项目。git忽略添加这个 lib 子文件夹，你就有了一个 "working" 技巧解决方案。

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

所以我避免所有项目都在同一个回购（angular /projects 文件夹）中，我让它可维护和可重用并且易于放置并且每个都有自己的回购。所以对我来说没问题。

感谢您的帮助。

Answer 3

你在compilerOptions的tsconfig.ts中添加这个：

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

Answer 4

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

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

Answer 5

我在尝试使用来自共享库模块的 UI 控件时遇到此 NullInjector 错误，将 @angular 路径添加到我的应用程序的 tsconfig.json 解决了这个问题。与 Ashwani Kumar 建议的相同。

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

NullInjectorError: No provider for ElementRef

NullInjectorError: No provider for ElementRef

angular-directive

angular-material

angular-module

angular

angular-library