Мое приложение Angular не компилируется из-за приведенной ниже ошибки. Я не уверен, почему. Я только что обновился до Angular 8, но я обновил и переустановил зависимости материалов.
NullInjectorError:StaticInjectorError(AppModule)[MatInput -> ElementRef]:
StaticInjectorError(Platform: core) [MatInput -> ElementRef]:
NullInjectorError: No provider for ElementRef!
Обновлять
Хорошо, это, по-видимому, из-за директивы, которую я создал. Если я удалю ссылку на директиву, ошибка будет устранена. В моей директиве должна быть проблема с инъекцией.
Испортит ли расположение файла исходные конфигурации angular? Например, командная строка создает службу в корневом каталоге приложения. Я переместил свои службы в папку «услуги». Будет ли это проблемой?
Это учебник, который я использовал для создания этой директивы.
https://devblogs.microsoft.com/premier-developer/angular-how-to-implement-feature-flags/
./приложение.компонент.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);
}
}
}
услуги/feature-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);
}
}
@Reactgular, я сам не связывал модули. Как мне перепроверить это?
Если бы вы это сделали, вы бы вспомнили, но вот вам помощь. stackoverflow.com/questions/24933955/…
попробуйте изменить private el: ElementRef тоже private el: ElementRef<HTMLElement>. Не уверен, что это поможет.
Нет ссылки на node_modules.
Вы не можете внедрить ElementRef в службу Angular. ElementRef можно внедрить в директивы и компоненты, поскольку они связаны с одним элементом в DOM. Службы не связаны ни с одним элементом, поэтому внедрение ElementRef не удастся. Вместо этого вам нужно будет передать ElementRef в качестве параметра сервисной функции, если это необходимо.
@AlexK приносит тепло! Вот и все. Я удалил ссылку на ElementRef, и мы готовы к работе. Если вы хотите создать ответ, я отмечу его как правильный.





Вероятно, вы не импортируете MatInputModule в модуль:
@NgModule({
imports: [MatInputModule]
})
export class AppModule {}
Я импортирую этот модуль в свой корневой модуль. Я предоставил обновленную информацию по моей проблеме.
Вы не можете внедрить ElementRef в сервис Angular.
ElementRef можно внедрять в директивы и компоненты, потому что они связаны с одним элементом в DOM. Сервисы не связаны ни с одним элементом, поэтому внедрение ElementRef не удастся.
Если вам нужно получить доступ к экземпляру ElementRef из сервисной функции, вам нужно будет передать ссылку в качестве параметра функции.
У меня были проблемы с ядром платформы и провайдерами при использовании
npm link. Связаны ли какие-либо из ваших узловых модулей?