parametros - pasar datos de un componente a otro angular 2

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

Question

He creado una aplicación básica en Angular, 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.

Answer 1

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

Answer 2

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

El error que hice fue mencionar HttpClientModule en Proveedores en lugar de Importar módulo angular

Answer 3

Además de las respuestas anteriores dadas, parece que este error también se produce cuando a su servicio inyectable le falta el decorador @Injectable() 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 tiene definido @Injectable() .

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

Abrí un problema sobre este asunto .

Answer 4

Además del decorador @Injectable() falta

La falta del decorador @Injectable() en la clase abstracta produjo No se pueden resolver todos los parámetros para el servicio: (?) El decorador debe estar presente en MyService así como en la clase derivada BaseService

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

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

Answer 5

Al usar importaciones de barril, considere importar inyectables primero como regla general.

Answer 6

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

Suponga 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 Angular todavía no conoce las clases dependientes (es decir, en este caso, las clases B y C ) ( probablemente en tiempo de ejecución durante el proceso de inyección de dependencia de Angular en la clase A ), 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 A se 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) {}
}

Answer 7

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

Answer 8

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://.com/a/37907696/893630

Answer 9

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

Answer 10

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

Answer 11

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

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

Injectable()
export class MyHttpService{
}

Agregar el símbolo @ falta lo arregla.

@Injectable()
export class MyHttpService{
}

Answer 12

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

Answer 13

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

No está bien :(

Answer 14

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 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 debido a que un servicio o componente depende circularmente.

Answer 15

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

En AngularMaterial-2 DatePicker.

Entonces, básicamente, olvidé agregar la @Injectable .

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

@Injectable({
  providedIn: ''root''
})

El error se ha ido.

Answer 16

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.

Answer 17

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

Answer 18

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.

Answer 19

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

Answer 20

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.

Answer 21

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ó)

Answer 22

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 .

Answer 23

Ocurre también cuando se refiere a una interface .

El cambio de interface para la class arregló, trabajando con y sin @Inject .

Answer 24

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

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Answer 25

Para mí esto fue porque dejé de usar el indicador -aot mientras intentaba acelerar el tiempo de compilación.

 ng serve -aot

Answer 26

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

Answer 27

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 --aot puede 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 ImageCarouselComponent.service.ts para que no se mezcle con mis otros servicios.

Answer 28

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 post 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 (un EventService ) que ambos servicios pueden inyectar para intercambiar mensajes.

Answer 29

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

Answer 30

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