EXCEPTION: impossible de résoudre tous les paramètres

J'ai créé une application de base dans Angular 2, mais j'ai rencontré un problème étrange où je ne peux pas injecter de service dans l'un de mes composants. Cependant, il injecte bien dans l'un des trois autres composants que j'ai créés.

Pour commencer, voici le 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;
  }

}

Et le composant avec lequel il refuse de travailler:

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);
  }

}

L'erreur que j'obtiens dans la console du navigateur est la suivante:

EXCEPTION: impossible de résoudre tous les paramètres de HeaderComponent: (?).

J'ai le service dans la fonction bootstrap donc il a un fournisseur. Et je semble pouvoir l'injecter dans le constructeur de n'importe lequel de mes autres composants sans problème.

Importez-le du fichier où il est déclaré directement au lieu du baril.

Je ne sais pas ce qui cause exactement le problème mais je l'ai vu mentionné plusieurs fois (probablement une sorte de dépendance circulaire).

Il devrait également être réparable en modifiant l'ordre des exportations dans le baril (je ne sais pas les détails, mais a également été mentionné)

En plus des réponses précédentes données, il semble que cette erreur soit également lancée lorsque votre service injectable manque le @Injectable()décorateur réel . Donc, avant de déboguer la dépendance cyclique et l'ordre de vos importations / exportations, vérifiez simplement si votre service a réellement@Injectable() défini.

Cela s'applique à la dernière version angulaire actuelle, Angular 2.1.0.

J'ai ouvert un dossier à ce sujet .

Depuis Angular, 2.2.3il existe désormais une forwardRef()fonction utilitaire qui vous permet d'injecter des fournisseurs qui n'ont pas encore été définis.

Par non défini, je veux dire que la carte d'injection de dépendances ne connaît pas l'identifiant. C'est ce qui se passe lors des dépendances circulaires. Vous pouvez avoir des dépendances circulaires dans Angular qui sont très difficiles à démêler et à voir.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

L'ajout @Inject(forwardRef(() => MobileService))au paramètre du constructeur dans le code source de la question d'origine résoudra le problème.

Références

Manuel Angular 2: ForwardRef

Références directes dans Angular 2

FAUX # 1: Oubliant le décorateur:

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

FAUX # 2: Omission du symbole "@":

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

FAUX # 3: Omettre les symboles "()":

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

FAUX # 4: "i" minuscule:

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

FAUX # 5: Vous avez oublié: importez {Injectable} de '@ angular / core';

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

CORRECT:

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

Comme déjà indiqué, le problème est dû à la commande d'exportation dans le baril qui est causée par des dépendances circulaires.

Une explication plus détaillée est ici: https://stackoverflow.com/a/37907696/893630

J'ai également rencontré cela en injectant le service A dans le service B et vice versa.

Je pense que c'est une bonne chose que cela échoue rapidement car il devrait probablement être évité de toute façon . Si vous souhaitez que vos services soient plus modulaires et réutilisables, il est préférable d'éviter autant que possible les références circulaires. Ce post met en évidence les pièges qui l'entourent.

Par conséquent, j'ai les recommandations suivantes:

• Si vous pensez que les classes interagissent trop souvent (je parle d' envie de fonctionnalités ), vous voudrez peut-être envisager de fusionner les 2 services en 1 classe .
• Si ce qui précède ne fonctionne pas pour vous, envisagez d'utiliser un 3ème service , (an EventService) que les deux services peuvent injecter afin d'échanger des messages.

Pour le bénéfice des chercheurs; J'ai eu cette erreur. C'était simplement un symbole @ manquant.

C'est à dire cela produit l' Can't resolve all parameters for MyHttpServiceerreur.

Injectable()
export class MyHttpService{
}

L'ajout du @symbole manquant le corrige.

@Injectable()
export class MyHttpService{
}

Dans mon cas, je devais ajouter import "core-js/es7/reflect";à ma demande pour faire du @Injectabletravail.

Une autre possibilité est de ne pas avoir emitDecoratorMetadatadéfini la valeur true dans tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Vous obtenez cette erreur si vous disposez du service A qui dépend d'une propriété / méthode statique du service B et que le service B lui-même dépend de l' injection de dépendances par le service A. C'est donc une sorte de dépendance circulaire, même si ce n'est pas le cas puisque la propriété / méthode est statique. Probablement un bogue qui se produit en combinaison avec AOT .

En plus du @Injectable()décorateur manquant

Le @Injectable()décorateur manquant dans la classe abstraite a produit Impossible de résoudre tous les paramètres de service: (?) Le décorateur doit être présent MyServicedans la classe dérivéeBaseService

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

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

Dans mon cas, cela s'est produit parce que je n'ai pas déclaré le type d'un paramètre constructeur.

J'avais quelque chose comme ça:

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

puis le changer pour le code ci-dessous a résolu mon problème.

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

pour moi, c'était juste un manque de ()@Injectable. Le bon est @Injectable ()

La suppression des paramètres de la méthode constructor () injectable l'a résolu pour mon cas.

Dans mon cas, c'était à cause du plugin Augury, désactivez-le, cela fonctionnera bien. L'option alternative est aot, fonctionne également.

tous les crédits à @ Boboss74, il a posté la réponse ici: https://github.com/angular/angular/issues/23958

Eh bien, pour moi, le problème était encore plus ennuyeux, j'utilisais un service au sein d'un service et j'ai oublié de l'ajouter comme dépendance dans l'appModule! J'espère que cela permet à quelqu'un d'économiser plusieurs heures en cassant l'application uniquement pour la reconstituer

Vous devez ajouter un tableau de fournisseurs dans le décorateur @Component ou dans le module où votre composant est déclaré. Composant intérieur, vous pouvez faire comme ci-dessous:

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

Dans mon cas, le passage de paramètres incorrects au constructeur génère cette erreur, l'idée de base à propos de cette erreur est que vous avez inconsciemment transmis des arguments incorrects à une fonction.

export class ProductComponent {
    productList: Array<Product>;

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

J'ai résolu cela en supprimant simplement cet argument.

Pour moi, j'ai eu cette erreur lorsque j'ai désactivé par erreur cette importation dans le fichier polyfills.ts, vous devez vous assurer qu'elle est importée pour éviter cette erreur.

/** 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';

Dans mon cas, j'essayais d'étendre la méthode " NativeDateAdapter" afin de remplacer la format(date: Date, displayFormat: Object)méthode " ".

Dans AngularMaterial-2 DatePicker.

Donc, fondamentalement, j'ai oublié d'ajouter une @Injectableannotation.

Après avoir ajouté ceci à ma classe "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

L'erreur a disparu.

Cette réponse peut être très utile pour ce problème. De plus, pour mon cas, exporter le service comme en defaultétait la cause.

FAUX:

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

CORRECT:

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

Cela peut être un problème très difficile à déboguer en raison du manque de rétroaction dans l'erreur. Si vous êtes préoccupé par une dépendance cyclique réelle, voici la chose la plus importante à regarder dans la trace de la pile a) le nom du service b) le paramètre constructeur dans ce service qui a un point d'interrogation, par exemple s'il ressemble à ceci:

ne peut pas résoudre tous les paramètres pour AuthService: ([objet objet], [objet objet], [objet objet], [objet objet],?)

cela signifie alors que le 5ème paramètre est un service qui dépend également d'AuthService. c.-à-d. point d'interrogation, signifie qu'il n'a pas été résolu par DI.

De là, il vous suffit de découpler les 2 services en restructurant le code.

J'ai rencontré cette erreur en tapant mal le nom du service, c'est-à-dire le constructeur ( myService privé : MyService ).

Pour les services mal orthographiés, j'ai pu déterminer quel service était le problème (j'en avais plusieurs répertoriés dans le constructeur) en inspectant la page dans Chrome-> Console. Vous verrez dans le message une liste de tableaux "paramètres" en affichant l'objet Object, object Object,? (ou quelque chose comme ça). Remarquez où le "?" est et c'est la position du service qui cause le problème.

Bien que l' ordre des classes exportées à l'intérieur des barils ait été mentionné, le scénario suivant peut également produire le même effet.

Supposons que vous ayez des classes A, Bet Cexportées à partir du même fichier où cela Adépend Bet C:

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

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

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

Étant donné que les classes dépendantes (c'est-à-dire dans ce cas les classes Bet C) ne sont pas encore connues d'Angular, ( probablement au moment de l'exécution pendant le processus d'injection de dépendance d'Angular sur la classeA ), l'erreur est déclenchée.

Solution

La solution consiste à déclarer et exporter les classes dépendantes avant la classe où l'ID est effectuée.

c'est-à-dire que dans le cas ci-dessus, la classe Aest déclarée juste après la définition de ses dépendances:

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

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

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

Dans mon cas, j'exportais une classe et une énumération à partir du même fichier de composant:

mComponent.component.ts:

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

Ensuite, j'essayais d'utiliser MyEnumd'un enfant de MyComponentClass. Cela provoquait l' erreur Impossible de résoudre tous les paramètres .

En déplaçant MyEnumdans un dossier séparé de MyComponentClass, cela a résolu mon problème!

Comme Günter Zöchbauer l'a mentionné, cela se produit car un service ou un composant dépend de façon circulaire.

Si votre service est défini dans le même fichier qu'un composant (qui le consomme) et que le service est défini après le composant dans le fichier, vous pouvez obtenir cette erreur. Cela est dû au même problème «forwardRef» que d'autres ont mentionné. Pour le moment, VSCode n'est pas très utile pour vous montrer cette erreur et la compilation se compile avec succès.

L'exécution de la build avec --aotpeut masquer ce problème en raison de la façon dont le compilateur fonctionne (probablement lié au tremblement de l'arbre).

Solution: assurez-vous que le service est défini dans un autre fichier ou avant la définition du composant. (Je ne sais pas si forwardRef peut être utilisé dans ce cas, mais cela semble maladroit de le faire).

Si j'ai un service très simple qui est très fortement lié à un composant (un peu comme un modèle de vue) - par exemple. ImageCarouselComponent, Je peux le nommer ImageCarouselComponent.service.tsafin qu'il ne soit pas mélangé avec mes autres services.

Dans mon cas, c'était une référence circulaire. J'ai eu MyService appelant Myservice2 et MyService2 appelant MyService.

Pas bon :(

Dans mon cas, la raison était la suivante:

• mon service injectable A a étendu une autre classe B
• B avait un constructeur qui nécessitait un argument
• Je n'avais défini aucun constructeur en A

Par conséquent, lors de la tentative de création d'un objet A, le constructeur par défaut a échoué. Je n'ai aucune idée pourquoi ce n'était pas une erreur de compilation.

Je l'ai corrigé en ajoutant simplement un constructeur dans A, qui a correctement appelé le constructeur de B.

Je t'ai eu!

Si aucune des réponses ci-dessus ne vous a aidé, vous importez peut-être un élément du même fichier où un composant injecte le service.

J'explique mieux:

Voici le fichier de service :

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

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

Voici le fichier composant :

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

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

Cela pose donc des problèmes même si le symbole n'est pas à l'intérieur du même composant, mais juste à l'intérieur du même fichier. Déplacez le symbole (il peut s'agir d'une fonction, d'une constante, d'une classe, etc.) ailleurs et l'erreur disparaîtra

pour les versions angulaires 6 et plus récentes, essayez

@Injectable({
  providedIn: 'root'
})

.. juste au-dessus de votre classe de service sans autre ligne entre les deux

avantages

• pas besoin d'ajouter le service à n'importe quel module (sera "auto-découvert")
• le service sera un singleton (puisqu'il sera injecté dans root)

[ documents angulaires ]