Angular kann Dienst nicht injizieren: Vollständige Fehleranalyse

Einleitung: Warum schreit Angular «Can't resolve all parameters»?

Sie schreiben Ihre erste Angular-Komponente, fügen stolz einen Dienst für die API-Arbeit im Konstruktor hinzu, starten die Anwendung – und erhalten sofort eine rote Meldung in der Konsole:

EXCEPTION: Can't resolve all parameters for MyComponent: (?).

Kommt Ihnen das bekannt vor? Dieser Fehler ist ein echter Stolperstein für Anfänger und sogar für erfahrene Entwickler, die von AngularJS wechseln. Er tritt auf, wenn Angular nicht verstehen kann, welcher Dienst genau in die Komponente injiziert werden soll. In diesem Artikel analysieren wir alle Ursachen des Fehlers Can't resolve all parameters for component, zeigen Live-Beispiele in TypeScript und geben schrittweise Lösungen. Sie werden nicht nur den Bug beheben, sondern auch verstehen, wie Dependency Injection (DI) in Angular funktioniert.

Was ist Dependency Injection und warum ist sie wichtig?

Angular basiert auf dem System der Abhängigkeitsinjektion (DI). Wenn Sie schreiben:

constructor(private myService: MyService) {}

erstellt Angular automatisch eine Instanz von MyService und übergibt sie an die Komponente. Dafür muss es jedoch drei Dinge wissen:

• Welcher Typ (Klasse) injiziert werden soll.
• Wo der Provider für diesen Typ registriert ist.
• Was zu tun ist, wenn es keinen Provider gibt.

Wenn mindestens einer dieser Punkte nicht erfüllt ist, erhalten Sie den Fehler «Can't resolve all parameters».

Hauptursachen des Fehlers

Wir haben die 5 häufigsten Szenarien identifiziert, die zu diesem Fehler führen. Jedes wird mit Code analysiert.

1. Dienst ist nicht in den Providern registriert

Die offensichtlichste Ursache. Sie haben einen Dienst erstellt, aber vergessen, ihn in den providers des Moduls oder der Komponente hinzuzufügen.

Beispiel für fehlerhaften Code:

// my.service.ts@Injectable()export class MyService {  getData() { return 'data'; }}

// my.component.ts@Component({ selector: 'app-my', template: '...' })export class MyComponent {  constructor(private myService: MyService) {} // Fehler!}

Lösung: Registrieren Sie den Dienst im Modul:

@NgModule({  providers: [MyService] // <-- unbedingt})export class AppModule { }

Oder in der Komponente selbst (wenn der Dienst nur für sie benötigt wird):

@Component({  providers: [MyService]})export class MyComponent { ... }

2. Fehlender @Injectable()-Dekorator

Selbst wenn Sie den Dienst in den Providern registriert haben, aber vergessen haben, den Dekorator @Injectable() hinzuzufügen – Angular kann die Metadaten nicht lesen.

Beispiel:

// Ohne Dekoratorexport class MyService { ... }

// In der Komponenteconstructor(private myService: MyService) {} // Fehler!

Lösung: Fügen Sie immer @Injectable() hinzu:

@Injectable({ providedIn: 'root' }) // oder einfach @Injectable()export class MyService { ... }

Übrigens: providedIn: 'root' registriert den Dienst automatisch auf der Ebene des Root-Injektors – dies ist der moderne und empfohlene Ansatz.

3. Konflikt mit AOT-Kompilierung und Konstruktorparametern

Angular verwendet zwei Kompilierungsmodi: JIT (Just-in-Time) und AOT (Ahead-of-Time). Der Fehler Can't resolve all parameters tritt häufig bei AOT auf, wenn TypeScript die Typinformationen der Parameter nicht gespeichert hat.

Ursache: In älteren Angular-Versionen (vor 5) oder bei Verwendung bestimmter tsconfig-Einstellungen konnte TypeScript die Typmetadaten entfernen. Zum Beispiel, wenn Sie emitDecoratorMetadata: false verwendet oder vergessen haben, reflect-metadata zu importieren.

Lösung:

• Stellen Sie sicher, dass in der tsconfig.json die Einstellungen "emitDecoratorMetadata": true und "experimental