AUSNAHME: Es können nicht alle Parameter aufgelöst werden

Ich habe eine Basis-App in Angular 2 erstellt, bin jedoch auf ein seltsames Problem gestoßen, bei dem ich keinen Dienst in eine meiner Komponenten einfügen kann. Es fügt sich jedoch gut in eine der drei anderen Komponenten ein, die ich erstellt habe.

Für den Anfang ist dies der Service:

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

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }

  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }

}

Und die Komponente, mit der es nicht arbeiten will:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

Der Fehler, den ich in der Browserkonsole erhalte, ist folgender:

AUSNAHME: Es können nicht alle Parameter für HeaderComponent aufgelöst werden: (?).

Ich habe den Dienst in der Bootstrap-Funktion, also hat es einen Anbieter. Und ich scheine in der Lage zu sein, es ohne Probleme in den Konstruktor einer meiner anderen Komponenten zu injizieren.

Importieren Sie es aus der Datei, in der es direkt anstelle des Laufs deklariert ist.

Ich weiß nicht genau, was das Problem verursacht, aber ich habe es mehrmals erwähnt gesehen (wahrscheinlich eine Art zirkuläre Abhängigkeit).

Es sollte auch durch Ändern der Reihenfolge der Exporte im Fass behoben werden können (keine Details bekannt, wurde aber auch erwähnt)

Zusätzlich zu den vorherigen Antworten scheint dieser Fehler auch ausgelöst zu werden, wenn Ihrem injizierbaren Service der eigentliche @Injectable()Dekorateur fehlt . Bevor Sie also die Sache mit der zyklischen Abhängigkeit und die Reihenfolge Ihrer Importe / Exporte debuggen, überprüfen Sie einfach, ob Ihr Service tatsächlich @Injectable()definiert wurde.

Dies gilt für das aktuelle Angular, Angular 2.1.0.

Ich habe eine Ausgabe zu diesem Thema eröffnet .

Ab Angular 2.2.3gibt es jetzt eineforwardRef() Dienstprogrammfunktion, mit der Sie Anbieter einfügen können, die noch nicht definiert wurden.

Mit nicht definiert meine ich, dass die Abhängigkeitsinjektionskarte den Bezeichner nicht kennt. Dies geschieht bei zirkulären Abhängigkeiten. Sie können zirkuläre Abhängigkeiten in Angular haben, die sehr schwer zu entwirren und zu sehen sind.

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

Durch Hinzufügen @Inject(forwardRef(() => MobileService))zum Parameter des Konstruktors im Quellcode der ursprünglichen Frage wird das Problem behoben.

Verweise

Angular 2 Handbuch: ForwardRef

Vorwärtsreferenzen in Winkel 2

FALSCH # 1: Dekorateur vergessen:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }

FALSCH # 2: Auslassen des "@" Symbols:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }

FALSCH # 3: Auslassen von "()" Symbolen:

//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }

FALSCH # 4: Kleinbuchstaben "i":

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

FALSCH # 5: Sie haben vergessen: {Injectable} aus '@ angle / core' importieren;

//Uncaught ReferenceError: Injectable is not defined
@Injectable
export class MyFooService { ... }

RICHTIG:

@Injectable()
export class MyFooService { ... }

Wie bereits erwähnt, wird das Problem durch die Exportbestellung innerhalb des Fasses verursacht, die durch zirkuläre Abhängigkeiten verursacht wird.

Eine ausführlichere Erklärung finden Sie hier: https://stackoverflow.com/a/37907696/893630

Ich bin auch darauf gestoßen, indem ich Service A in Service B eingefügt habe und umgekehrt.

Ich finde es gut, dass dies schnell fehlschlägt, da es wahrscheinlich sowieso vermieden werden sollte . Wenn Sie möchten, dass Ihre Dienste modularer und wiederverwendbarer sind, sollten Sie Zirkelverweise so weit wie möglich vermeiden. Dieser Beitrag hebt die Fallstricke hervor, die damit verbunden sind.

Daher habe ich folgende Empfehlungen:

• Wenn Sie der Meinung sind, dass die Klassen zu oft interagieren (ich spreche von Feature-Neid ), sollten Sie die beiden Dienste zu einer Klasse zusammenführen .
• Wenn das oben Genannte für Sie nicht funktioniert, sollten Sie einen dritten Dienst (an EventService) in Betracht ziehen, den beide Dienste einspeisen können, um Nachrichten auszutauschen.

Zum Nutzen der Suchenden; Ich habe diesen Fehler bekommen. Es war einfach ein fehlendes @ -Symbol.

Dh dies erzeugt den Can't resolve all parameters for MyHttpServiceFehler.

Injectable()
export class MyHttpService{
}

Hinzufügen der fehlenden @ Symbols behebt Problem.

@Injectable()
export class MyHttpService{
}

In meinem Fall musste ich import "core-js/es7/reflect";meiner Bewerbung etwas hinzufügen , damit es @Injectablefunktioniert.

Eine andere Möglichkeit besteht emitDecoratorMetadatadarin, in tsconfig.json nicht auf true gesetzt zu haben

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Sie erhalten diesen Fehler, wenn Sie Service A haben , der von einer statischen Eigenschaft / Methode von Service B abhängt, und der Service B selbst von Service A durch Abhängigkeitsinjektion abhängt. Es ist also eine Art zirkuläre Abhängigkeit, obwohl dies nicht der Fall ist, da die Eigenschaft / Methode statisch ist. Wahrscheinlich ein Fehler, der in Kombination mit AOT auftritt .

Neben dem fehlenden @Injectable()Dekorateur

Fehlender @Injectable()Dekorator in der abstrakten Klasse hat Folgendes erzeugt: Kann nicht alle Parameter für den Service auflösen: (?) Der Dekorator muss sowohl in MyServiceals auch in der abgeleiteten Klasse vorhanden seinBaseService

//abstract class
@Injectable()
abstract class BaseService { ... }

//MyService    
@Injectable()
export class MyService extends BaseService {
.....
}

In meinem Fall ist es passiert, weil ich den Typ für einen Konstruktorparameter nicht deklariert habe.

Ich hatte so etwas:

constructor(private URL, private http: Http) { }

und dann das Ändern in den Code unten löste mein Problem.

constructor(private URL : string, private http: Http) {}

für mich fehlte es einfach ()an @Injectable. Richtig ist @Injectable ()

Das Entfernen von Parametern aus der injizierbaren Konstruktor () -Methode löste es für meinen Fall.

In meinem Fall war es wegen des Plugins Augury, deaktivieren Sie es wird gut funktionieren. Alternative Option ist aot, funktioniert auch.

Alle Credits an @ Boboss74, er hat die Antwort hier gepostet: https://github.com/angular/angular/issues/23958

Nun, für mich war das Problem noch ärgerlicher. Ich habe einen Dienst innerhalb eines Dienstes verwendet und vergessen, ihn als Abhängigkeit im AppModule hinzuzufügen! Ich hoffe, dies hilft jemandem, mehrere Stunden beim Ausfall der App zu sparen, nur um sie wieder aufzubauen

Sie müssen ein Provider-Array in @Component Decorator oder in dem Modul hinzufügen, in dem Ihre Komponente deklariert ist. Innerhalb der Komponente können Sie wie folgt vorgehen:

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [MobileService]
})

In meinem Fall führt die Übergabe falscher Parameter an den Konstruktor zu diesem Fehler. Die Grundidee für diesen Fehler besteht darin, dass Sie unwissentlich einige falsche Argumente an eine Funktion übergeben haben.

export class ProductComponent {
    productList: Array<Product>;

    constructor(productList:Product) { 
         // productList:Product this arg was causing error of unresolved parameters.
         this.productList = [];
    }
}

Ich habe das gelöst, indem ich nur dieses Argument entfernt habe.

Ich habe diesen Fehler erhalten, als ich diesen Import in der Datei polyfills.ts versehentlich deaktiviert habe. Sie müssen sicherstellen, dass er importiert wird, um diesen Fehler zu vermeiden.

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

In meinem Fall habe ich versucht, " NativeDateAdapter" zu erweitern, um zu überschreiben "format(date: Date, displayFormat: Object) Methode Methode .

In AngularMaterial-2 DatePicker.

Im Grunde habe ich vergessen, eine @InjectableAnmerkung hinzuzufügen .

Nachdem ich dies meiner "CustomDateAdapter" -Klasse hinzugefügt habe:

@Injectable({
  providedIn: 'root'
})

Fehler ist weg.

Diese Antwort kann für dieses Problem sehr hilfreich sein. Außerdem war für meinen Fall der Export des Dienstes defaultdie Ursache.

FALSCH:

@Inject()
export default class MobileService { ... }

RICHTIG:

@Inject()
export class MobileService { ... }

Das Debuggen dieses Problems kann aufgrund des fehlenden Feedbacks im Fehler sehr schwierig sein. Wenn Sie sich Sorgen über eine tatsächliche zyklische Abhängigkeit machen, sollten Sie Folgendes im Stack-Trace beachten: a) den Namen des Dienstes b) den Konstruktorparameter in diesem Dienst, der ein Fragezeichen aufweist, z. B. wenn er so aussieht:

kann nicht alle Parameter für AuthService auflösen: ([Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt] ,?)

dann bedeutet dies, dass der 5. Parameter ein Dienst ist, der auch von AuthService abhängt. dh Fragezeichen bedeutet, dass es nicht von DI gelöst wurde.

Von dort müssen Sie nur noch die beiden Dienste entkoppeln, indem Sie den Code umstrukturieren.

Ich bin auf diesen Fehler gestoßen, indem ich den Namen des Dienstes falsch eingegeben habe , dh den Konstruktor (privater myService: MyService ).

Bei falsch geschriebenen Diensten konnte ich anhand der Seite in Chrome-> Konsole feststellen, welcher Dienst das Problem war (ich hatte mehrere im Konstruktor aufgelistet). Sie sehen als Teil der Nachricht eine "Parameter" -Arrayliste, indem Sie Objekt Objekt, Objekt Objekt ,? Anzeigen. (oder etwas ähnliches). Beachten Sie, wo das "?" ist und das ist die Position des Dienstes, der das Problem verursacht.

Obwohl die Bestellung der exportierten Klassen innerhalb von Fässern erwähnt wurde, kann das folgende Szenario den gleichen Effekt haben.

Angenommen , Sie haben Klassen A, Bund Cexportierte in derselben Datei , wo Ahängt davon ab , Bund C:

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

@Injectable()
export class B {...}

@Injectable()
export class C {...}

Da die abhängigen Klassen (dh in diesem Fall die Klassen Bund C) Angular noch nicht bekannt sind ( wahrscheinlich zur Laufzeit während des Angular-Abhängigkeitsinjektionsprozesses von der KlasseA ), wird der Fehler ausgelöst.

Lösung

Die Lösung besteht darin, die abhängigen Klassen vor der Klasse zu deklarieren und zu exportieren, in der der DI ausgeführt wird.

dh im obigen Fall wird die Klasse Adirekt nach der Definition ihrer Abhängigkeiten deklariert:

@Injectable()
export class B {...}

@Injectable()
export class C {...}

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

In meinem Fall habe ich eine Klasse und eine Aufzählung aus derselben Komponentendatei exportiert:

mComponent.component.ts::

export class MyComponentClass{...}
export enum MyEnum{...}

Dann habe ich versucht, MyEnumvon einem Kind von zu verwenden MyComponentClass. Dies verursachte den Fehler "Kann nicht alle Parameter beheben" .

Durch das Verschieben MyEnumin einen separaten Ordner von MyComponentClasswurde mein Problem gelöst!

Wie Günter Zöchbauer erwähnte, geschieht dies, weil ein Dienst oder eine Komponente zirkulär abhängig ist.

Wenn Ihr Dienst wird in der gleichen Datei als Bestandteil (das verbraucht es) und der Service definiert ist , definiert nach der Komponente in der Datei definiert ist, wird möglicherweise dieser Fehler angezeigt. Dies ist auf das gleiche 'forwardRef'-Problem zurückzuführen, das andere erwähnt haben. Derzeit ist VSCode nicht besonders gut darin, Ihnen diesen Fehler anzuzeigen, und der Build wird erfolgreich kompiliert.

Das Ausführen des Builds mit --aotkann dieses Problem aufgrund der Funktionsweise des Compilers maskieren (wahrscheinlich im Zusammenhang mit dem Schütteln von Bäumen).

Lösung: Stellen Sie sicher, dass der Dienst in einer anderen Datei oder vor der Komponentendefinition definiert ist. (Ich bin nicht sicher, ob forwardRef in diesem Fall verwendet werden kann, aber es scheint ungeschickt, dies zu tun).

Wenn ich einen sehr einfachen Dienst habe, der sehr stark an eine Komponente gebunden ist (ähnlich wie ein Ansichtsmodell) - z. ImageCarouselComponentIch kann es ImageCarouselComponent.service.tsso nennen, dass es nicht mit meinen anderen Diensten verwechselt wird.

In meinem Fall war es ein Zirkelverweis. Ich hatte MyService, der Myservice2 anrief, und MyService2, der MyService anrief.

Nicht gut :(

In meinem Fall war der Grund der folgende:

• Mein injizierbarer Service A erweiterte eine weitere Klasse B.
• B hatte einen Konstruktor, der ein Argument erforderte
• Ich hatte in A keinen Konstruktor definiert

Infolgedessen ist der Standardkonstruktor beim Versuch, ein Objekt A zu erstellen, fehlgeschlagen. Ich habe keine Ahnung, warum dies kein Kompilierungsfehler war.

Ich habe es behoben, indem ich einfach einen Konstruktor in A hinzugefügt habe, der den Konstruktor von B korrekt aufgerufen hat.

Erwischt!

Wenn Ihnen keine der oben genannten Antworten geholfen hat, importieren Sie möglicherweise ein Element aus derselben Datei, in die eine Komponente den Dienst einfügt.

Ich erkläre es besser:

Dies ist die Service - Datei :

// your-service-file.ts
import { helloWorld } from 'your-component-file.ts'

@Injectable()
export class CustomService() {
  helloWorld()
}

Dies ist die Komponente Datei :

@Component({..})
export class CustomComponent {
  constructor(service: CustomService) { }
}

export function helloWorld() {
  console.log('hello world');
}

Es verursacht also Probleme, selbst wenn sich das Symbol nicht in derselben Komponente befindet, sondern nur in derselben Datei. Verschieben Sie das Symbol (es kann eine Funktion, eine Konstante, eine Klasse usw. sein) an eine andere Stelle, und der Fehler wird ausgeblendet

Versuchen Sie es mit Angular 6 und neueren Versionen

@Injectable({
  providedIn: 'root'
})

.. direkt über Ihrer Serviceklasse ohne andere Zeilen dazwischen

Vorteile

• Der Dienst muss keinem Modul hinzugefügt werden (wird automatisch erkannt)
• Service wird ein Singleton sein (da es in root injiziert wird)

[ eckige Dokumente ]