Пользовательская угловая директива: NullInjectorError: StaticInjectorError (AppModule) [MatInput -> ElementRef]

Question

Мое приложение Angular не может скомпилироваться из-за ошибки ниже. Я не уверен почему. Я только что обновил до Angular 8, но я обновил и переустановил зависимости Material.

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

Обновление

Хорошо, это очевидно из-за директивы, которую я создал. Если я удалю ссылку на директиву, то ошибка будет устранена. В моей директиве должна быть проблема с инъекцией.

Местоположение файла портит угловые начальные конфигурации? Например, командная строка создает службу в корневом каталоге приложения. Я переместил свои сервисы в папку «сервисы». Будет ли это проблемой?

Это руководство, которое я использовал для создания этой директивы.

https://devblogs.microsoft.com/premier-developer/angular-how-to-implement-feature-flags/

. / App.component.html - вот где я вызываю директиву

<div>
  <app-compliance-review [myRemoveIfFeatureOff]="'compliancerev'" compliancerev="true"></app-compliance-review>
</div>

директивы / удалить, если-функция-off.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { FeatureFlagService } from '../services/feature-flag.service';

@Directive({
  selector: '[myRemoveIfFeatureOff]'
})
export class MyRemoveIfFeatureOffDirective implements OnInit {
  @Input('myRemoveIfFeatureOff') featureName: string;

  constructor(private el: ElementRef,
              private featureFlagService: FeatureFlagService) {
  }

  ngOnInit() {
    if (this.featureFlagService.featureOff(this.featureName)) {
      this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
    }
  }
}

услуги / функция-flag.service.ts

import { Injectable, ElementRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FeatureFlagService {

  constructor(private elementRef:ElementRef){}

  featureOff(featureName: string) {
    // Read the value from the root element
    if (this.elementRef.nativeElement.hasOwnProperty(featureName)) {
      let sFlag: string = this.elementRef.nativeElement.getAttribute(featureName);
      let bFlag: boolean = (sFlag =="true");
      return !bFlag;
    }
    return true; // if feature not found, default to turned off
  }

  featureOn(featureName: string) {
    return !this.featureOff(featureName);
  }
}

StackTrace:

Answer 1

Вы не можете ввести ElementRef в службу Angular.

ElementRef может быть введен в директивах и компонентах, поскольку они связаны с одним элементом в DOM. Службы не связаны с каким-либо конкретным элементом, поэтому внедрение ElementRef завершится неудачей.

Если вам нужен доступ к экземпляру ElementRef из сервисной функции, вам нужно передать ссылку в качестве параметра функции.

Answer 2

Вероятно, вы не импортируете MatInputModule в модуль:

@NgModule({
  imports: [MatInputModule]
})
export class AppModule {}