Error angular DI – EXCEPCIÓN: no se pueden resolver todos los parámetros

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 recibo 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 ser capaz de inyectarlo en el constructor de cualquiera de mis otros componentes sin problema.

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

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

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

Además de las respuestas anteriores dadas, parece que este error también se produce cuando el servicio inyectable falta el decorador @Injectable() real. Por lo tanto, antes de depurar la dependencia cíclica y el orden de sus importaciones / exportaciones, verifique simplemente si su servicio realmente tiene @Injectable() definido.

Esto se aplica a la última angular actual, Angular 2.1.0.

Abrí un problema sobre este asunto .

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

Por no definido, quiero decir que el mapa de dependency injection 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 desentrañar 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

Referencias futuras en Angular 2

INCORRECTO N.º 1: Olvidar 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 { ... } 

ERROR # 3: Omitir 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: Olvidaste: importar {Inyectable} de ‘@ angular / core’;

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

CORRECTO:

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

Como ya se indicó, el problema está causado por el orden de exportación dentro del barril causado por dependencias circulares.

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

También me encontré esto inyectando el servicio A en el servicio B y viceversa.

Personalmente, me alegro de que esto falle rápido, ya que probablemente debería evitarse de todos modos . Si desea que sus servicios sean más modulares / reutilizables, es mejor evitar referencias circulares tanto como sea posible. Esta publicación destaca las trampas que rodean eso.

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 ), es posible que desee considerar fusionar los 2 servicios en 1 clase .
  • Si lo anterior no funciona para usted, considere usar un tercer servicio , (un servicio de EventService ) que ambos servicios pueden inyectar para intercambiar mensajes.

Para el beneficio de los buscadores; Tengo este error Simplemente era un símbolo @ que faltaba.

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

 Injectable() export class MyHttpService{ } 

Agregar el símbolo @ falta lo corrige.

 @Injectable() export class MyHttpService{ } 

Obtiene este error si tiene el servicio A que depende de una propiedad estática / método de servicio B y el servicio B mismo depende del servicio A a través de dependency injection. 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 .

Además del @Injectable() faltante de @Injectable()

Falta el decorador @Injectable() en la clase abstracta producida No se pueden resolver todos los parámetros para el servicio: (?) El decorador debe estar presente tanto en MyService como en la clase derivada BaseService

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

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

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

Tenía algo como esto:

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

y luego cambiarlo al siguiente código resolvió mi problema.

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

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

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

En mi caso fue por el plugin 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

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 aplicaciones. Espero que esto ayude a alguien a ahorrar varias horas rompiendo la aplicación solo para construirla de nuevo.

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

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

Lo resolví simplemente eliminando ese argumento.

Otra posibilidad es no tener emitDecoratorMetadata establecido en true en tsconfig.json

 { "compilerOptions": { ... "emitDecoratorMetadata": true, ... } } 

En mi caso, recibí este error cuando deshabilité por error esta importación en el archivo polyfills.ts, debes asegurarte 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'; 

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

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

Aunque el orden de las clases exportadas desde dentro de los barriles puede haber sido mencionado, la siguiente situación también puede producir el mismo efecto.

Supongamos que tiene las clases A , B y C exportadas desde el mismo archivo donde A depende de B y 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 B y C ) aún no se conocen en Angular, ( probablemente en tiempo de ejecución durante el proceso de dependency injection de Angular en la clase A ), se produce 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 A se declara justo después de que se definan sus dependencias:

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

Cuando se usan importaciones de barril, considere la importación de inyectables primero como regla general.

Ocurre al referir una interface también.

Cambiar la interface para la class solucionó, trabajando con y sin @Inject .

Debe agregar una matriz de proveedores en @Component decorator o en el módulo donde se declara su componente. Componente interior puedes hacer lo siguiente:

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

A veces, esto sucede cuando declaraste el módulo incorporado de Angular (HttpClientModule, HttpErrorResponse, etc.) en app.module.js. También enfrenté el mismo problema pero resolví ahora.

El error que cometí fue mencionar HttpClientModule en proveedores en lugar de importar módulos angulares

Para mí, fue porque tenía una línea vacía entre mi decorador @Component y mi clase Component. Esto causó que el decorador no se aplicara a la clase.

En mi caso, estaba exportando un Class y un Enum del mismo archivo de componente:

mComponent.component.ts :

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

Entonces, estaba tratando de usar MyEnum de un hijo de MyComponentClass . Eso estaba causando el error No se puede resolver todos los parámetros .

Al mover MyEnum en una carpeta separada de MyComponentClass , ¡eso resolvió mi problema!

Como mencionó Günter Zöchbauer, esto está sucediendo porque un servicio o componente depende de forma circular.

En mi caso, tomé una dependencia en un servicio que no tenía dependencias y, por lo tanto, no agregué una función constructor() a la clase de servicio. Agregué un constructor sin parámetros a la clase de servicio dependiente y todo comenzó a funcionar.

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

En AngularMaterial-2 DatePicker.

Básicamente, olvidé agregar la @Injectable .

Después de agregar esto a mi clase “CustomDateAdapter”:

 @Injectable({ providedIn: 'root' }) 

El error se ha ido.

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 muy bueno para mostrarte este error y la comstackción se comstack correctamente.

Ejecutar la comstackción con --aot puede enmascarar este problema debido a la forma en que funciona el comstackdor (probablemente relacionado con temblores de á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 si forwardRef se puede usar en este caso, pero parece torpe hacerlo).

Si tengo un servicio muy simple que está muy vinculado a un componente (algo así como un modelo de vista), por ejemplo. ImageCarouselComponent , puedo ImageCarouselComponent.service.ts para que no se mezcle todo con mis otros servicios.

Para mí esto fue porque dejé de usar el indicador -aot mientras intentaba hacer el tiempo de comstackción más rápido.

  ng serve -aot