NullInjectorError：没有提供 ElementRef

Posted 2023-02-22

【中文标题】NullInjectorError：没有提供 ElementRef

【英文标题】：NullInjectorError: No provider for ElementRef

【发布时间】：2019-12-28 18:55:49

【问题描述】：

我在我的项目（Angular 8 + Material Design）的一个模块中创建了一个内部指令。跟随教程和官方文档。

@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 并添加了我的指令/组件/服务...

button-confirmation.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 问题，但没有发现这种情况（除了带有符号链接参数的

任何帮助不胜感激。提前致谢。

【问题讨论】：

您能告诉我们您是如何定义ButtonConfirmationModule 类的吗？您是否包含ButtonConfirmationModule 使用的必要模块（例如@angular/core 中的CommonModule 等）？

嗨，我将其添加到问题中。 CommonModule 在。重复一遍，如果它不在外部库中，但在项目中，它运行良好。如果您需要更多，请不要犹豫。谢谢

按照其他教程，我也尝试直接公开 ButtonConfirmationModule 但结果是一样的。

【参考方案1】：

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

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

【讨论】：

它适用于StaticInjectorError(Platform: core)[NgClass -> ElementRef]:

【参考方案2】：

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

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

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

【讨论】：

您好，我们的目标是构建一个单独的库，而不是在项目工作区中有这个库，我在不同的 git repo 中创建了不同的应用程序，一切都是独立的。也许你知道这样的方法？

【参考方案3】：

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

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

【参考方案4】：

没有找到解决方案。

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

所以诀窍是添加一个安装后脚本来创建一个 /src/libsub 文件夹，里面有“lib”repo（git clone），编辑主项目 .gitignore 以添加这个 libsubfolder，你就有了一个“工作”技巧解决方案.

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

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

感谢谁试图提供帮助。

【讨论】：

我遇到了类似的错误并通过重新启动服务器解决了它，这是在将依赖注入添加到类文件之后。

【参考方案5】：

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

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