Error al intentar inyectar un servicio en un componente angular "EXCEPCIÓN: No se pueden resolver todos los parámetros del componente", ¿por qué?

Creé una aplicación básica en Angular, pero me encontré con 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 de arranque, por lo que tiene un proveedor. Y parece que puedo inyectarlo en el constructor de cualquiera de mis otros componentes sin problemas.

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 sé 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 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 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, me refiero a 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

Manual de Angular 2: ForwardRef

Reenviar referencias en Angular 2

INCORRECTO # 1: Olvidar al decorador:

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

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

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

INCORRECTO # 3: Omitir los 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 {Injectable} 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 encontré 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 trampas que rodean eso.

Por tanto, tengo las siguientes recomendaciones:

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

Para beneficio de los buscadores; Recibí este error. Era simplemente un símbolo @ faltante.

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

Injectable()
export class MyHttpService{
}

Agregar el @símbolo que falta lo corrige.

@Injectable()
export class MyHttpService{
}

Además del @Injectable()decorador perdido

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

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

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

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

Otra posibilidad es no haberse emitDecoratorMetadataestablecido en true en tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

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

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

Tuve algo como esto:

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

y luego cambiarlo al código de abajo resolvió mi problema.

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

para mí fue solo la falta de ()@Injectable. Lo adecuado es @Injectable ()

La eliminación de parámetros del método constructor () inyectable lo resolvió para mi caso.

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

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

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 { ... }

Bueno, para mí el problema fue 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 descomponiendo la aplicación solo para volver a construirla

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

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

Debe agregar una matriz de proveedores en el decorador @Component o en el módulo donde se declara su componente. Dentro del componente 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 deshabilité por error esta importación 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 " NativeDateAdapter" para anular el format(date: Date, displayFormat: Object)método " ".

En AngularMaterial-2 DatePicker.

Así que básicamente me olvidé de agregar una @Injectableanotación.

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

@Injectable({
  providedIn: 'root'
})

El error se ha ido.

Este puede ser un problema realmente difícil de depurar debido a la falta de comentarios en el error. Si está preocupado por 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 del 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 DI no lo resolvió.

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

¡Te tengo!

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 de componentes :

@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 otro lugar y el error desaparecerá.

Si bien es posible que se haya mencionado el ordenamiento de las clases exportadas desde dentro de los barriles, el siguiente escenario también puede producir el mismo efecto.

Suponga que tiene clases A, By Cexporta desde el mismo archivo donde 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 que 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 pueden resolver todos los parámetros .

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

Como mencionó Günter Zöchbauer, esto sucede porque un servicio o componente es circularmente dependiente.

Si su servicio está definido 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 de 'forwardRef' que han mencionado otros. En este momento, VSCode no es bueno para mostrarle este error y la compilación se compila con éxito.

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 usar forwardRef en este caso, pero parece torpe hacerlo).

Si tengo un servicio muy simple que está fuertemente vinculado a un componente (algo así 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, el motivo fue el 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 llamó correctamente al constructor de B.

para angular 6 y versiones más recientes, pruebe

@Injectable({
  providedIn: 'root'
})

.. Justo encima de su clase de servicio sin otras líneas en el medio

ventajas

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

[ documentos angulares ]