EXCEPCIÓN: no se pueden resolver todos los parámetros

He creado una aplicación básica en Angular 2, pero he encontrado un problema extraño en el que no puedo inyectar un servicio en uno de mis componentes. Sin embargo, se inyecta bien en cualquiera de los otros tres componentes que he creado.

Para empezar, este es el servicio:

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

}

Y el componente con el que se niega a trabajar:

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

}

El error que obtengo en la consola del navegador es este:

EXCEPCIÓN: No se pueden resolver todos los parámetros para HeaderComponent: (?).

Tengo el servicio en la función bootstrap, por lo que tiene un proveedor. Y parece que puedo inyectarlo en el constructor de cualquiera de mis otros componentes sin problema.

Importarlo desde el archivo donde se declara directamente en lugar del barril.

No sé qué causa exactamente el problema, pero lo vi mencionado varias veces (probablemente algún tipo de dependencia circular).

También debería ser reparable cambiando el orden de las exportaciones en el barril (no se conocen detalles, pero también se mencionó)

Además de las respuestas anteriores dadas, parece que este error también se produce cuando a su servicio inyectable le falta el @Injectable()decorador real . Entonces, antes de depurar la cuestión de la dependencia cíclica y el orden de sus importaciones / exportaciones, haga una simple verificación si su servicio realmente se ha @Injectable()definido.

Esto se aplica a la última versión actual de Angular, Angular 2.1.0.

Abrí un problema sobre este asunto .

A partir de Angular, 2.2.3ahora hay una forwardRef()función de utilidad que le permite inyectar proveedores que aún no se han definido.

Por no definido, quiero decir que el mapa de inyección de dependencia no conoce el identificador. Esto es lo que sucede durante las dependencias circulares. Puede tener dependencias circulares en Angular que son muy difíciles de desenredar y ver.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

Agregar @Inject(forwardRef(() => MobileService))al parámetro del constructor en el código fuente de la pregunta original solucionará el problema.

Referencias

Angular 2 Manual: ForwardRef

Reenviar referencias en Angular 2

INCORRECTO # 1: Olvidando al decorador:

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

INCORRECTO # 2: Omitiendo el símbolo "@":

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

INCORRECTO # 3: Omitiendo símbolos "()":

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

INCORRECTO # 4: "i" minúscula:

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

INCORRECTO # 5: Olvidó: importar {Inyectable} desde '@ angular / core';

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

CORRECTO:

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

Como ya se dijo, el problema es causado por el pedido de exportación dentro del barril que es causado por dependencias circulares.

Una explicación más detallada está aquí: https://stackoverflow.com/a/37907696/893630

También me encontré con esto al inyectar el servicio A en el servicio B y viceversa.

Creo que es bueno que esto falle rápidamente, ya que probablemente debería evitarse de todos modos . Si desea que sus servicios sean más modulares y reutilizables, es mejor evitar las referencias circulares tanto como sea posible. Esta publicación destaca las dificultades que la rodean.

Por lo tanto, tengo las siguientes recomendaciones:

• Si cree que las clases interactúan con demasiada frecuencia (estoy hablando de la envidia de las características ), puede considerar fusionar los 2 servicios en 1 clase .
• Si lo anterior no funciona para usted, considere usar un tercer servicio , (a EventService) que ambos servicios pueden inyectar para intercambiar mensajes.

En beneficio de los buscadores; Tengo este error Era simplemente un símbolo @ perdido.

Es decir, esto produce el Can't resolve all parameters for MyHttpServiceerror.

Injectable()
export class MyHttpService{
}

Agregar el @símbolo que falta lo arregla.

@Injectable()
export class MyHttpService{
}

En mi caso, necesitaba agregar import "core-js/es7/reflect";a mi aplicación para hacer el @Injectabletrabajo.

Otra posibilidad es no haber emitDecoratorMetadataestablecido en verdadero en tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Obtiene este error si tiene el servicio A que depende de una propiedad / método estático del servicio B y el servicio B en sí depende de la inyección de dependencia a través del servicio A. Por lo tanto, es una especie de dependencia circular, aunque no lo es, ya que la propiedad / método es estática. Probablemente un error que ocurre en combinación con AOT .

Además del @Injectable()decorador perdido

El @Injectable()decorador faltante en la clase abstracta produjo No se pueden resolver todos los parámetros para el servicio: (?) El decorador debe estar presente MyServicetanto como en la clase derivadaBaseService

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

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

En mi caso, sucedió porque no declaró el tipo para un parámetro constructor.

Tenía algo como esto:

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

y luego cambiarlo al código a continuación resolvió mi problema.

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

para mí fue solo falta de ()@Injectable. Proper is @Injectable ()

Eliminar parámetros del método constructor inyectable () lo resolvió para mi caso.

En mi caso fue por el plugin Augury, deshabilitarlo funcionará bien. La opción alternativa no es, también funciona.

Todos los créditos a @ Boboss74, publicó la respuesta aquí: https://github.com/angular/angular/issues/23958

Bueno, para mí el problema era aún más molesto, estaba usando un servicio dentro de un servicio y olvidé agregarlo como dependencia en el módulo de aplicación. Espero que esto ayude a alguien a ahorrar varias horas desglosando la aplicación solo para volver a compilarla

Debe agregar la matriz de proveedores en el decorador @Component o en el módulo donde se declara su componente. Componente interno puede hacer lo siguiente:

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

En mi caso, pasar parámetros incorrectos al constructor genera este error, la idea básica sobre este error es que, sin saberlo, pasó algunos argumentos incorrectos a cualquier función.

export class ProductComponent {
    productList: Array<Product>;

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

Resolví esto simplemente eliminando ese argumento.

Para mí, recibí este error cuando desactivé esta importación por error en el archivo polyfills.ts, debe asegurarse de que se importe para evitar ese error.

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

En mi caso, estaba intentando extender el método NativeDateAdapter" format(date: Date, displayFormat: Object)" para anular " ".

En AngularMaterial-2 DatePicker.

Así que básicamente olvidé agregar @Injectableanotaciones.

Después de agregar esto a mi clase "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

El error se ha ido.

Esta respuesta puede ser muy útil para este problema. Además, para mi caso, exportar el servicio como defaultfue la causa.

INCORRECTO:

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

CORRECTO:

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

Este puede ser un problema realmente difícil de depurar debido a la falta de comentarios en el error. Si le preocupa una dependencia cíclica real, esto es lo más importante que debe observar en el seguimiento de la pila a) el nombre del servicio b) el parámetro constructor en ese servicio que tiene un signo de interrogación, por ejemplo, si se ve así:

no se pueden resolver todos los parámetros para AuthService: ([objeto Objeto], [objeto Objeto], [objeto Objeto], [objeto Objeto],?)

entonces significa que el quinto parámetro es un servicio que también depende de AuthService. es decir, signo de interrogación, significa que no fue resuelto por DI.

A partir de ahí, solo necesita desacoplar los 2 servicios reestructurando el código.

He encontrado este error al escribir mal el nombre del servicio, es decir, constructor ( myService privado : MyService ).

Para los servicios mal escritos, pude determinar qué servicio era el problema (tenía varios listados en el constructor) inspeccionando la página en Chrome-> Console. Verá como parte del mensaje una lista de matriz de "parámetros" al mostrar el objeto Object, object Object,? (o algo así). Observe dónde está el "?" es y esa es la posición del servicio que está causando el problema.

Aunque puede haberse mencionado el pedido de clases exportadas desde barriles, el siguiente escenario también puede producir el mismo efecto.

Suponga que tiene clases A, By Cexportado desde dentro del mismo archivo en el que Adepende de By C:

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

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

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

Dado que las clases dependientes (es decir, en este caso, las clases By C) aún no son conocidas por Angular, ( probablemente en tiempo de ejecución durante el proceso de inyección de dependencia de Angular en la claseA ) se genera el error.

Solución

La solución es declarar y exportar las clases dependientes antes de la clase donde se realiza la DI.

es decir, en el caso anterior, la clase Ase declara justo después de definir sus dependencias:

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

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

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

En mi caso, estaba exportando una Clase y una Enum desde el mismo archivo de componente:

mComponent.component.ts:

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

Entonces, estaba tratando de usar MyEnumde un niño de MyComponentClass. Eso estaba causando el error No se puede resolver todos los parámetros .

Al moverme MyEnumen una carpeta separada de MyComponentClass, ¡eso resolvió mi problema!

Como mencionó Günter Zöchbauer, esto está sucediendo debido a que un servicio o componente depende circularmente.

Si su servicio se define en el mismo archivo que un componente (que lo consume) y el servicio se define después del componente en el archivo, puede obtener este error. Esto se debe al mismo problema 'forwardRef' que otros han mencionado. En este momento, VSCode no es excelente para mostrarle este error y la compilación se compila correctamente.

Ejecutar la compilación con --aotpuede enmascarar este problema debido a la forma en que funciona el compilador (probablemente relacionado con la sacudida del árbol).

Solución: asegúrese de que el servicio esté definido en otro archivo o antes de la definición del componente. (No estoy seguro de si se puede utilizar forwardRef en este caso, pero parece torpe hacerlo).

Si tengo un servicio muy simple que está fuertemente vinculado a un componente (como un modelo de vista), por ejemplo. ImageCarouselComponent, Puedo nombrarlo ImageCarouselComponent.service.tspara que no se mezcle con mis otros servicios.

En mi caso fue una referencia circular. Tenía MyService llamando a Myservice2 y MyService2 llamando a MyService.

No está bien :(

En mi caso, la razón fue la siguiente:

• mi servicio inyectable A extendió otra clase B
• B tenía un constructor que requería un argumento
• No había definido ningún constructor en A

Como consecuencia, al intentar crear un objeto A, el constructor predeterminado falló. No tengo idea de por qué esto no fue un error de compilación.

Lo solucioné simplemente agregando un constructor en A, que correctamente llamó al constructor de B.

Gotcha!

Si ninguna de las respuestas anteriores lo ayudó, tal vez esté importando algún elemento del mismo archivo donde un componente está inyectando el servicio.

Te explico mejor:

Este es el archivo de servicio :

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

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

Este es el archivo componente :

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

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

Por lo tanto, causa problemas incluso si el símbolo no está dentro del mismo componente, sino solo dentro del mismo archivo. Mueva el símbolo (puede ser una función, una constante, una clase, etc.) a otra parte y el error se desvanecerá.

para angular 6 y versiones más nuevas, intente

@Injectable({
  providedIn: 'root'
})

.. justo encima de su clase de servicio sin otras líneas intermedias

ventajas

• no es necesario agregar el servicio a ningún módulo (se "descubrirá automáticamente")
• el servicio será un singleton (ya que se inyectará en la raíz)

[ documentos angulares ]