EXCEÇÃO: Não é possível resolver todos os parâmetros

Criei um aplicativo básico no Angular 2, mas encontrei um problema estranho no qual não posso injetar um serviço em um dos meus componentes. No entanto, ele injeta bem em qualquer um dos outros três componentes que criei.

Para iniciantes, este é o serviço:

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 o componente com o qual se recusa a trabalhar:

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

}

O erro que recebo no console do navegador é o seguinte:

EXCEÇÃO: Não é possível resolver todos os parâmetros para HeaderComponent: (?).

Eu tenho o serviço na função de inicialização, para que ele tenha um provedor. E eu pareço capaz de injetá-lo no construtor de qualquer um dos meus outros componentes sem problemas.

Importe-o do arquivo em que é declarado diretamente em vez do barril.

Não sei o que exatamente causa o problema, mas o vi mencionado várias vezes (provavelmente algum tipo de dependência circular).

Também deve ser corrigível alterando a ordem das exportações no barril (não sabe detalhes, mas também foi mencionado)

Além das respostas anteriores, parece que esse erro também é gerado quando o serviço injetável está faltando no @Injectable()decorador real . Portanto, antes de depurar o item de dependência cíclica e a ordem de suas importações / exportações, faça uma verificação simples se seu serviço realmente foi @Injectable()definido.

Isso se aplica ao Angular atual mais recente, o Angular 2.1.0.

Abri uma questão sobre esse assunto .

A partir do Angular 2.2.3, agora existe uma forwardRef()função de utilitário que permite injetar provedores que ainda não foram definidos.

Por não definido, quero dizer que o mapa de injeção de dependência não conhece o identificador. É o que acontece durante dependências circulares. Você pode ter dependências circulares no Angular que são muito difíceis de desembaraçar e ver.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

A adição @Inject(forwardRef(() => MobileService))ao parâmetro do construtor no código-fonte da pergunta original corrigirá o problema.

Referências

Manual do Angular 2: ForwardRef

Encaminhar referências no Angular 2

ERRO # 1: Esquecendo o Decorador:

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

ERRO # 2: Omitindo o símbolo "@":

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

ERRADO # 3: Omitindo símbolos "()":

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

ERRADO # 4: "i" minúsculo:

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

ERRO # 5: Você esqueceu: importar {Injetável} de '@ angular / core';

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

CORRIGIR:

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

Como já foi dito, o problema é causado pelo pedido de exportação dentro do barril, causado por dependências circulares.

Uma explicação mais detalhada está aqui: https://stackoverflow.com/a/37907696/893630

Eu também encontrei isso injetando o serviço A no serviço B e vice-versa.

Eu acho que é bom que isso falhe rápido, pois provavelmente deve ser evitado de qualquer maneira . Se você deseja que seus serviços sejam mais modulares e reutilizáveis, é melhor evitar referências circulares o máximo possível. Este post destaca as armadilhas que cercam isso.

Portanto, tenho as seguintes recomendações:

• Se você sentir que as classes estão interagindo com muita frequência (estou falando de inveja de recursos ), convém mesclar os dois serviços em uma classe .
• Se o exposto acima não funcionar, considere o uso de um terceiro serviço ( EventService), que ambos os serviços podem injetar para trocar mensagens.

Para o benefício dos pesquisadores; Eu recebi esse erro. Era simplesmente um símbolo @ ausente.

Ou seja, isso produz o Can't resolve all parameters for MyHttpServiceerro.

Injectable()
export class MyHttpService{
}

A adição do @símbolo ausente o corrige.

@Injectable()
export class MyHttpService{
}

No meu caso, eu precisava adicionar import "core-js/es7/reflect";ao meu aplicativo para fazer o @Injectabletrabalho.

Outra possibilidade é não ter emitDecoratorMetadatadefinido como true no tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Você recebe esse erro se tiver o serviço A que depende de uma propriedade estática / método de serviço B e o próprio serviço B depende do serviço A através da injeção de dependência. Portanto, é um tipo de dependência circular, embora não seja porque a propriedade / método é estático. Provavelmente um bug que ocorre em combinação com o AOT .

Além do @Injectable()decorador ausente

O @Injectable()decorador ausente na classe abstrata produziu o item Não é possível resolver todos os parâmetros de serviço: (?) O decorador precisa estar presente na MyServiceclasse derivada e na classe derivadaBaseService

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

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

No meu caso, aconteceu porque não declarei o tipo para um parâmetro do construtor.

Eu tinha algo parecido com isto:

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

e alterá-lo para o código abaixo resolveu meu problema.

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

para mim, foi apenas a falta do ()@Injectable. Adequado é @Injectable ()

A remoção de parâmetros do método injetável constructor () resolveu o problema para o meu caso.

No meu caso, foi por causa do plugin Augury, desativá-lo funcionará bem. Opção alternativa é aot, também funciona.

todos os créditos para @ Boboss74, ele postou a resposta aqui: https://github.com/angular/angular/issues/23958

Bem, para mim, o problema era ainda mais irritante, eu estava usando um serviço dentro de um serviço e esqueci de adicioná-lo como dependência no appModule! Espero que isso ajude alguém a economizar várias horas quebrando o aplicativo apenas para construí-lo novamente

Você precisa adicionar uma matriz de provedores no decorador @Component ou no módulo em que seu componente é declarado. Componente interno, você pode fazer o seguinte:

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

No meu caso, passar parâmetros errados para o construtor gera esse erro, a idéia básica sobre esse erro é que você passou inadvertidamente alguns argumentos errados para qualquer função.

export class ProductComponent {
    productList: Array<Product>;

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

Resolvi isso apenas removendo esse argumento.

Para mim, recebi esse erro quando desabilitei esta importação por engano no arquivo polyfills.ts, é necessário garantir que ela seja importada para evitar esse erro.

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

No meu caso, eu estava tentando estender " NativeDateAdapter" para substituir "format(date: Date, displayFormat: Object) " o método.

Em AngularMaterial-2 DatePicker.

Então, basicamente, eu esqueci de adicionar @Injectable anotação.

Depois de adicionar isso à minha classe "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

Ocorreu um erro.

Esta resposta pode ser muito útil para esse problema. Além disso, no meu caso, exportar o serviço como defaultfoi a causa.

ERRADO:

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

CORRIGIR:

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

Esse pode ser um problema realmente difícil de depurar devido à falta de feedback no erro. Se você está preocupado com uma dependência cíclica real, aqui está a coisa mais importante a ser observada no rastreamento da pilha: a) o nome do serviço b) o parâmetro construtor nesse serviço que possui um ponto de interrogação, por exemplo, se estiver assim:

não é possível resolver todos os parâmetros para AuthService: ([objeto Objeto], [objeto Objeto], [objeto Objeto], [objeto Objeto],?)

significa que o quinto parâmetro é um serviço que também depende do AuthService. ou seja, ponto de interrogação, significa que não foi resolvido pelo DI.

A partir daí, você só precisa dissociar os 2 serviços reestruturando o código.

Eu encontrei esse erro digitando incorretamente o nome do serviço, ou seja, construtor (private myService: MyService ).

Para serviços com erros de ortografia, consegui determinar qual serviço era o problema (eu tinha vários listados no construtor) inspecionando a página no Chrome-> Console. Você verá como parte da mensagem uma lista de array de "parâmetros" exibindo o objeto Object, objeto Object,? (ou algo assim). Observe onde o "?" é e essa é a posição do serviço que está causando o problema.

Embora a encomenda das classes exportadas de dentro de barris possa ter sido mencionada, o cenário a seguir também pode produzir o mesmo efeito.

Suponha que você tenha classes A, Be Cexportadas de dentro do mesmo arquivo em que Adepende Be C:

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

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

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

Como as classes dependentes (ou seja, neste caso, classes Be C) ainda não são conhecidas pelo Angular, ( provavelmente em tempo de execução durante o processo de injeção de dependência do Angular na classeA ), o erro é gerado.

Solução

A solução é declarar e exportar as classes dependentes antes da classe em que o DI é feito.

ou seja, no caso acima, a classe Aé declarada logo após a definição de suas dependências:

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

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

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

No meu caso, eu estava exportando uma classe e um enum do mesmo arquivo de componente:

mComponent.component.ts:

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

Então, eu estava tentando usar MyEnumde um filho de MyComponentClass. Isso estava causando o erro Não é possível resolver todos os parâmetros .

Ao mover MyEnumuma pasta separada de MyComponentClass, isso resolveu meu problema!

Como Günter Zöchbauer mencionou, isso está acontecendo devido a um serviço ou componente ser circularmente dependente.

Se o seu serviço estiver definido no mesmo arquivo que um componente (que o consome) e o serviço for definido após o componente no arquivo, você poderá receber este erro. Isso ocorre devido ao mesmo problema 'forwardRef' mencionado por outros. No momento, o VSCode não é bom em mostrar esse erro e a compilação é compilada com êxito.

A execução da compilação --aotpode mascarar esse problema devido à maneira como o compilador funciona (provavelmente relacionado ao tremor da árvore).

Solução: verifique se o serviço está definido em outro arquivo ou antes da definição do componente. (Não tenho certeza se o forwardRef pode ser usado nesse caso, mas parece desajeitado fazê-lo).

Se eu tiver um serviço muito simples que esteja fortemente vinculado a um componente (como um modelo de exibição) - por exemplo. ImageCarouselComponent, Posso citar o nome ImageCarouselComponent.service.tspara que não se confunda com meus outros serviços.

No meu caso, era uma referência circular. Eu tinha o MyService chamando Myservice2 e o MyService2 chamando MyService.

Não é bom :(

No meu caso, o motivo foi o seguinte:

• meu serviço injetável A estendeu outra classe B
• B tinha um construtor que exigia um argumento
• Eu não havia definido nenhum construtor em A

Como conseqüência, ao tentar criar um objeto A, o construtor padrão falhou. Não faço ideia por que isso não foi um erro de compilação.

Para consertá-lo, basta adicionar um construtor em A, que corretamente chamou o construtor de B.

Peguei vocês!

Se nenhuma das respostas acima o ajudou, talvez você esteja importando algum elemento do mesmo arquivo em que um componente está injetando o serviço.

Eu explico melhor:

Este é o arquivo de serviço :

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

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

Este é o arquivo de componente :

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

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

Isso causa problemas, mesmo que o símbolo não esteja dentro do mesmo componente, mas apenas dentro do mesmo arquivo. Mova o símbolo (pode ser uma função, uma constante, uma classe e assim por diante ...) em outro lugar e o erro desaparecerá

para angular 6 e versões mais recentes, tente

@Injectable({
  providedIn: 'root'
})

.. logo acima da sua classe de serviço, sem outras linhas no meio

vantagens

• não é necessário adicionar o serviço a nenhum módulo (será "descoberto automaticamente")
• serviço será um singleton (já que será injetado na raiz)

[ documentos angulares ]