ECCEZIONE: impossibile risolvere tutti i parametri

Ho creato un'app di base in Angular 2, ma ho riscontrato uno strano problema in cui non riesco a iniettare un servizio in uno dei miei componenti. Inietta bene in uno qualsiasi degli altri tre componenti che ho creato, tuttavia.

Per cominciare, questo è il servizio:

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

}

E il componente con cui si rifiuta di lavorare:

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'errore che ottengo nella console del browser è questo:

ECCEZIONE: impossibile risolvere tutti i parametri per HeaderComponent: (?).

Ho il servizio nella funzione bootstrap quindi ha un provider. E sembra che sia in grado di iniettarlo senza problemi nel costruttore di uno qualsiasi dei miei altri componenti.

Importalo dal file dove viene dichiarato direttamente anziché dalla canna.

Non so che cosa causi esattamente il problema, ma l'ho visto menzionato più volte (probabilmente una sorta di dipendenza circolare).

Dovrebbe anche essere riparabile modificando l'ordine delle esportazioni nel barile (non conosco i dettagli, ma è stato menzionato anche)

Oltre alle precedenti risposte fornite, sembra che questo errore venga generato anche quando nel tuo servizio iniettabile manca l'effettivo @Injectable()decoratore. Quindi, prima di eseguire il debug della cosa di dipendenza ciclica e l'ordine delle tue importazioni / esportazioni, fai un semplice controllo se il tuo servizio è stato effettivamente @Injectable()definito.

Questo vale per l'attuale Angular più recente, Angular 2.1.0.

Ho aperto un problema su questo argomento .

A partire da Angular 2.2.3ora esiste una forwardRef()funzione di utilità che consente di iniettare provider non ancora definiti.

Per non definito, intendo che la mappa di iniezione delle dipendenze non conosce l'identificatore. Questo è ciò che accade durante le dipendenze circolari. Puoi avere dipendenze circolari in Angolare che sono molto difficili da districare e vedere.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

L'aggiunta @Inject(forwardRef(() => MobileService))al parametro del costruttore nel codice sorgente della domanda originale risolverà il problema.

Riferimenti

Manuale angolare 2: ForwardRef

Riferimenti in avanti in Angolare 2

SBAGLIATO # 1: dimenticare il decoratore:

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

SBAGLIATO # 2: omettere il simbolo "@":

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

SBAGLIATO # 3: omettere i simboli "()":

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

SBAGLIATO # 4: "i" minuscola:

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

SBAGLIATO # 5: hai dimenticato: importare {Injectable} da '@ angular / core';

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

CORRETTA:

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

Come già detto, il problema è causato dall'ordinamento delle esportazioni all'interno del barile che è causato da dipendenze circolari.

Una spiegazione più dettagliata è qui: https://stackoverflow.com/a/37907696/893630

Ho anche riscontrato questo iniettando il servizio A nel servizio B e viceversa.

Penso che sia una buona cosa che questo fallisca rapidamente, poiché probabilmente dovrebbe essere evitato comunque . Se vuoi che i tuoi servizi siano più modulari e riutilizzabili, è meglio evitare riferimenti circolari il più possibile. Questo post evidenzia le insidie ​​che lo circondano.

Pertanto, ho i seguenti consigli:

• Se ritieni che le classi interagiscano troppo spesso (sto parlando di invidia delle funzionalità ), potresti prendere in considerazione l' idea di unire i 2 servizi in 1 classe .
• Se quanto sopra non funziona per te, considera l'utilizzo di un terzo servizio , (a EventService) che entrambi i servizi possono iniettare per scambiare messaggi.

A beneficio dei ricercatori; Ho ricevuto questo errore. Era semplicemente un simbolo @ mancante.

Cioè Questo produce l' Can't resolve all parameters for MyHttpServiceerrore.

Injectable()
export class MyHttpService{
}

L'aggiunta del @simbolo mancante lo risolve.

@Injectable()
export class MyHttpService{
}

Nel mio caso, ho dovuto aggiungere import "core-js/es7/reflect";alla mia applicazione per @Injectablefunzionare.

Un'altra possibilità non è stata emitDecoratorMetadataimpostata su true in tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Questo errore viene visualizzato se si dispone del servizio A che dipende da una proprietà / metodo statico del servizio B e il servizio B stesso dipende dal servizio A tramite l'iniezione di dipendenza. Quindi è una specie di dipendenza circolare, anche se non lo è poiché la proprietà / metodo è statico. Probabilmente un bug che si verifica in combinazione con AOT .

Oltre al @Injectable()decoratore mancante

Il @Injectable()decoratore mancante nella classe astratta ha prodotto Impossibile risolvere tutti i parametri per il servizio: (?) Il decoratore deve essere presente MyServicesia nella classe derivataBaseService

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

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

Nel mio caso, è successo perché non ho dichiarato il tipo per un parametro del costruttore.

Ho avuto qualcosa del genere:

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

e poi cambiarlo nel codice qui sotto risolto il mio problema.

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

per me è stata solo la mancanza di ()@Injectable. Proper è @Injectable ()

La rimozione dei parametri dal metodo del costruttore iniettabile () ha risolto il problema nel mio caso.

Nel mio caso è stato a causa del plugin Augury, disabilitarlo funzionerà bene. L'opzione alternativa è aot, funziona anche.

tutti i crediti a @ Boboss74, ha pubblicato la risposta qui: https://github.com/angular/angular/issues/23958

Bene, per me il problema era ancora più fastidioso, stavo usando un servizio all'interno di un servizio e ho dimenticato di aggiungerlo come dipendenza nell'appModule! Spero che questo aiuti qualcuno a risparmiare diverse ore rompendo l'app solo per ricostruirla di nuovo

Devi aggiungere un array di provider in @Component decorator o nel modulo in cui è dichiarato il tuo componente. All'interno del componente puoi fare come di seguito:

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

Nel mio caso il passaggio di parametri errati al costruttore genera questo errore, l'idea di base di questo errore è che inconsapevolmente hai passato alcuni argomenti sbagliati a qualsiasi funzione.

export class ProductComponent {
    productList: Array<Product>;

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

Ho risolto questo semplicemente rimuovendo tale argomento.

Per me, ho ricevuto questo errore quando ho disabilitato erroneamente questa importazione nel file polyfills.ts, è necessario assicurarsi che sia importato per evitare tale errore.

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

Nel mio caso stavo cercando di estendere il metodo NativeDateAdapter" format(date: Date, displayFormat: Object)" per sovrascrivere " ".

In AngularMaterial-2 DatePicker.

Quindi sostanzialmente ho dimenticato di aggiungere l' @Injectableanotazione.

Dopo averlo aggiunto alla mia classe "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

L'errore è andato.

Questa risposta potrebbe essere molto utile per questo problema. Inoltre, nel mio caso, l'esportazione del servizio è defaultstata la causa.

SBAGLIATO:

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

CORRETTA:

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

Questo può essere un problema davvero difficile da debug a causa della mancanza di feedback nell'errore. Se sei preoccupato per un'effettiva dipendenza ciclica, ecco la cosa più importante da guardare nella traccia dello stack a) il nome del servizio b) il parametro del costruttore in quel servizio che ha un punto interrogativo, ad esempio se assomiglia a questo:

impossibile risolvere tutti i parametri per AuthService: ([oggetto oggetto], [oggetto oggetto], [oggetto oggetto], [oggetto oggetto],?)

quindi significa che il 5o parametro è un servizio che dipende anche da AuthService. cioè punto interrogativo, significa che non è stato risolto da DI.

Da lì, devi solo disaccoppiare i 2 servizi ristrutturando il codice.

Ho riscontrato questo errore digitando erroneamente il nome del servizio, ovvero costruttore ( myService privato : MyService ).

Per i servizi con errori di ortografia, sono stato in grado di determinare quale servizio era il problema (ne avevo elencati diversi nel costruttore) controllando la pagina in Chrome-> Console. Vedrai come parte del messaggio un elenco di parametri "parametri" visualizzando oggetto Oggetto, oggetto Oggetto,? (o qualcosa di simile). Notare dove il "?" è e quella è la posizione del servizio che sta causando il problema.

Sebbene l' ordinamento delle classi esportate all'interno dei barili possa essere stato menzionato, anche il seguente scenario può produrre lo stesso effetto.

Supponiamo di avere classi A, Be Cesportato dal all'interno dello stesso file in cui Adipende Be C:

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

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

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

Poiché le classi dipendenti (ovvero in questo caso classi Be C) non sono ancora note ad Angular, ( probabilmente in fase di esecuzione durante il processo di iniezione di dipendenza Angular sulla classeA ), viene generato l'errore.

Soluzione

La soluzione è dichiarare ed esportare le classi dipendenti prima della classe in cui viene eseguita la DI.

cioè nel caso sopra riportato la classe Aviene dichiarata subito dopo aver definito le sue dipendenze:

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

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

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

Nel mio caso, stavo esportando una classe e un'enum dallo stesso file componente:

mComponent.component.ts:

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

Quindi, stavo cercando di usare MyEnumda un bambino di MyComponentClass. Ciò stava causando l' errore Impossibile risolvere tutti i parametri .

Spostandomi MyEnumin una cartella separata da MyComponentClass, ciò ha risolto il mio problema!

Come menzionato da Günter Zöchbauer, ciò sta accadendo perché un servizio o un componente è circolarmente dipendente.

Se il servizio è definito nello stesso file di un componente (che lo consuma) e il servizio è definito dopo il componente nel file, è possibile che venga visualizzato questo errore. Ciò è dovuto allo stesso problema 'forwardRef' che altri hanno menzionato. Al momento VSCode non è eccezionale nel mostrarti questo errore e la compilazione si compila con successo.

L'esecuzione della build con --aotpuò mascherare questo problema a causa del modo in cui funziona il compilatore (probabilmente correlato al tremolio dell'albero).

Soluzione: assicurarsi che il servizio sia definito in un altro file o prima della definizione del componente. (Non sono sicuro che forwardRef possa essere usato in questo caso, ma sembra goffo farlo).

Se ho un servizio molto semplice che è fortemente legato a un componente (un po 'come un modello di vista) - ad es. ImageCarouselComponent, Potrei nominarloImageCarouselComponent.service.ts modo che non si confonda con gli altri miei servizi.

Nel mio caso era un riferimento circolare. Ho avuto MyService che chiamava Myservice2 e MyService2 che chiamava MyService.

Non bene :(

Nel mio caso, il motivo era il seguente:

• il mio servizio iniettabile A ha esteso un'altra classe B
• B aveva un costruttore che richiedeva una discussione
• Non avevo definito alcun costruttore in A

Di conseguenza, quando si tenta di creare un oggetto A, il costruttore predefinito non è riuscito. Non ho idea del perché questo non sia stato un errore di compilazione.

Ho risolto semplicemente aggiungendo un costruttore in A, che correttamente chiamato costruttore di B.

Gotcha!

Se nessuna delle risposte precedenti ti ha aiutato, forse stai importando qualche elemento dallo stesso file cui un componente sta iniettando il servizio.

Spiego meglio:

Questo è il file di servizio :

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

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

Questo è il file componente :

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

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

Quindi causa problemi anche se il simbolo non è all'interno dello stesso componente, ma solo all'interno dello stesso file. Sposta il simbolo (può essere una funzione, una costante, una classe e così via ...) altrove e l'errore svanirà

per angolare 6 e versioni più recenti, provare

@Injectable({
  providedIn: 'root'
})

.. proprio sopra la tua classe di servizio senza altre linee in mezzo

vantaggi

• non è necessario aggiungere il servizio a nessun modulo (verrà "scoperto automaticamente")
• il servizio sarà un singleton (poiché verrà iniettato nella radice)

[ documenti angolari ]