Question

我在项目（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 -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问题，但在这种情况下什么也没找到（除了旧的解决方案<8带有symlink参数，但没有正常工作）。

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

Answer 1

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

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

来导入lib。

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

Answer 2

找不到解决方案。

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

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

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

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

感谢尝试提供帮助的人。

Answer 3

您将其添加到编译器选项的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：没有提供ElementRef

5 个答案: