NullInjectorError:没有提供ElementRef

时间:2019-08-23 12:35:17

标签: angular angular-material angular-directive angular-module angular-library

我在项目(Angular 8 + Material Design)的模块中创建了一个内部指令。遵循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 -Sng 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问题,但在这种情况下什么也没找到(除了旧的解决方案<8带有symlink参数,但没有正常工作)。

任何帮助表示赞赏。预先感谢。

5 个答案:

答案 0 :(得分:1)

  

对于lib的安装,我使用本地方式(私有项目   没有npm):npm install ../fop-common/dist/fop-common --save

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

来导入lib。

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

答案 1 :(得分:0)

找不到解决方案。

我将代码(仅不是lib上下文)放回了项目中,而不是创建一个lib,但是我将两个git repo分开以进行重用。

因此,窍门是添加一个后安装脚本以创建一个/ src / libsubfolder,并在其中包含“ lib”仓库(git clone),编辑主项目.gitignore以添加此libsubfolder,您将获得一个“有效的”窍门解决方案

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

因此,我避免将所有项目都放在同一个仓库中(角/ projects文件夹),我将其保持可维护性,可重用性并且易于放置,并且每个仓库都有自己的仓库。所以对我来说没关系。

感谢尝试提供帮助的人。

答案 2 :(得分:0)

您将其添加到编译器选项的tsconfig.ts中:

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

答案 3 :(得分:0)

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

在应用程序的tsconfig(您要链接到库的位置)中而不是库中的paths映射。

答案 4 :(得分:0)

当尝试使用共享库模块中的UI控件时,出现此NullInjector错误,将@angular路径添加到应用程序的tsconfig.json中解决了该问题。与Ashwani Kumar建议的一样。

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