WYJĄTEK: nie można rozwiązać wszystkich parametrów

Zbudowałem podstawową aplikację w Angular 2, ale napotkałem dziwny problem, w którym nie mogę wstrzyknąć usługi do jednego z moich komponentów. Jednak wstrzykuje się dobrze w którykolwiek z trzech innych komponentów, które stworzyłem.

Na początek jest to usługa:

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

}

A komponent, z którym odmawia współpracy:

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

}

Występuje błąd w konsoli przeglądarki:

WYJĄTEK: nie można rozwiązać wszystkich parametrów dla HeaderComponent: (?).

Mam usługę w funkcji bootstrap, więc ma dostawcę. I wydaje mi się, że jestem w stanie wstrzyknąć go do konstruktora dowolnego z moich innych komponentów bez problemu.

Zaimportuj go z pliku, w którym jest zadeklarowany bezpośrednio zamiast beczki.

Nie wiem, co dokładnie powoduje problem, ale widziałem to kilka razy (prawdopodobnie pewną zależność cykliczną).

Powinien być również naprawiony poprzez zmianę kolejności eksportu w beczce (nie znam szczegółów, ale został również wspomniany)

Oprócz wcześniejszych odpowiedzi wydaje się, że ten błąd jest zgłaszany również wtedy, gdy usługa wstrzykiwania nie ma rzeczywistego @Injectable()dekoratora. Dlatego przed debugowaniem kwestii cyklicznej zależności i kolejności importu / eksportu należy po prostu sprawdzić, czy usługa faktycznie @Injectable()zdefiniowała.

Dotyczy to aktualnej wersji Angular, Angular 2.1.0.

Otworzyłem problem w tej sprawie .

Od Angular 2.2.3dostępna jest teraz forwardRef()funkcja narzędzia, która pozwala wstrzykiwać dostawców, którzy nie zostali jeszcze zdefiniowani.

Przez niezdefiniowane rozumiem, że mapa wstrzykiwania zależności nie zna identyfikatora. Tak dzieje się podczas zależności cyklicznych. W Angular możesz mieć zależności kołowe, które bardzo trudno jest rozplątać i zobaczyć.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

Dodanie @Inject(forwardRef(() => MobileService))do parametru konstruktora w kodzie źródłowym pierwotnego pytania naprawi problem.

Bibliografia

Instrukcja Angular 2: ForwardRef

Przekaż referencje w Angular 2

ŹLE # 1: Zapominanie o Dekoratorze:

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

ŹLE # 2: Pominięcie symbolu „@”:

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

ŹLE # 3: Pominięcie symboli „()”:

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

ŹLE # 4: Małe litery „i”:

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

ŹLE # 5: Zapomniałeś: import {Injectable} z '@ angular / core';

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

POPRAWNY:

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

Jak już wspomniano, problem jest spowodowany zamówieniem eksportu w beczce, który jest spowodowany zależnościami cyklicznymi.

Bardziej szczegółowe wyjaśnienie znajduje się tutaj: https://stackoverflow.com/a/37907696/893630

Zetknąłem się również z tym, wstrzykując usługę A do usługi B i odwrotnie.

Myślę, że to dobrze, że szybko się to nie udaje, bo i tak powinno się go unikać . Jeśli chcesz, aby Twoje usługi były bardziej modułowe i nadawały się do ponownego wykorzystania, najlepiej unikać w miarę możliwości odwołań cyklicznych. Ten post podkreśla pułapki, które go otaczają.

Dlatego mam następujące zalecenia:

• Jeśli uważasz, że klasy zbyt często wchodzą w interakcje (mówię o zazdrości o funkcje ), możesz rozważyć połączenie 2 usług w 1 klasę .
• Jeśli powyższe nie działa, rozważ skorzystanie z trzeciej usługi (an EventService), którą obie usługi mogą wprowadzić w celu wymiany wiadomości.

Z korzyścią dla poszukiwaczy; Mam ten błąd. To był po prostu brakujący symbol @.

Tj. To powoduje Can't resolve all parameters for MyHttpServicebłąd.

Injectable()
export class MyHttpService{
}

Dodanie brakującego @symbolu naprawia go.

@Injectable()
export class MyHttpService{
}

W moim przypadku musiałem dodać import "core-js/es7/reflect";do mojej aplikacji, aby @Injectabledziałać.

Inną możliwością nie jest emitDecoratorMetadataustawienie wartości true w pliku tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Ten błąd występuje, jeśli masz usługę A, która zależy od właściwości statycznej / metody usługi B, a sama usługa B zależy od wstrzyknięcia zależności usługi A do koryta. Jest to więc rodzaj zależności cyklicznej, chociaż nie jest tak, ponieważ właściwość / metoda jest statyczna. Prawdopodobnie błąd występujący w połączeniu z AOT .

Oprócz brakujących @Injectable() dekoratora

Brak @Injectable()dekoratora w klasie abstrakcyjnej spowodował, że nie można rozwiązać wszystkich parametrów usługi: (?) Dekorator musi być obecny MyServicezarówno w klasie pochodnej, jak iBaseService

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

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

W moim przypadku stało się tak, ponieważ nie zadeklarowałem typu parametru konstruktora.

Miałem coś takiego:

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

a następnie zmiana go na poniższy kod rozwiązała mój problem.

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

dla mnie był to po prostu brak ()w @Injectable. Prawidłowe jest @Injectable ()

Usunięcie parametrów z metody iniekcji konstruktora () rozwiązało to w moim przypadku.

W moim przypadku było to spowodowane wtyczką Augury, wyłącz to będzie działać poprawnie. Alternatywną opcją jest aot, działa również.

wszystkie kredyty @ Boboss74, opublikował odpowiedź tutaj: https://github.com/angular/angular/issues/23958

Cóż, dla mnie problem był jeszcze bardziej irytujący, korzystałem z usługi w ramach usługi i zapomniałem dodać ją jako zależność w module aplikacji! Mam nadzieję, że pomoże to komuś zaoszczędzić kilka godzin na zerwaniu aplikacji, ale tylko do jej ponownego utworzenia

Musisz dodać tablicę dostawców w dekoratorze @Component lub w module, w którym deklarowany jest twój komponent. Wewnątrz komponentu możesz wykonać następujące czynności:

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

W moim przypadku przekazanie niewłaściwych parametrów do konstruktora generuje ten błąd, podstawową ideą tego błędu jest to, że nieświadomie przekazałeś jakieś nieprawidłowe argumenty do dowolnej funkcji.

export class ProductComponent {
    productList: Array<Product>;

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

Rozwiązałem to, po prostu usuwając ten argument.

Dla mnie ten błąd wystąpił, gdy przez pomyłkę wyłączyłem ten import w pliku polyfills.ts, musisz się upewnić, że został zaimportowany, aby uniknąć tego błędu.

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

W moim przypadku próbowałem przedłużyć „ NativeDateAdapter”, aby zastąpić ”format(date: Date, displayFormat: Object) metodę metodę ”.

W AngularMaterial-2 DatePicker.

Zasadniczo więc zapomniałem dodać @Injectableanotację.

Po dodaniu tego do mojej klasy „CustomDateAdapter”:

@Injectable({
  providedIn: 'root'
})

Błąd zniknął.

Ta odpowiedź może być bardzo pomocna w przypadku tego problemu. Ponadto w moim przypadku eksport usługi defaultbył przyczyną.

ŹLE:

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

POPRAWNY:

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

Może to być bardzo trudny problem do debugowania z powodu braku informacji zwrotnej w błędzie. Jeśli obawiasz się o faktyczną zależność cykliczną, oto najważniejszą rzeczą, na którą należy zwrócić uwagę w stosie a) nazwa usługi b) parametr konstruktora w tej usłudze, który ma znak zapytania, np. Jeśli wygląda tak:

nie można rozwiązać wszystkich parametrów dla usługi AuthService: ([Object Object], [Object Object], [Object Object], [Object Object],?)

oznacza to, że piąty parametr jest usługą zależną również od usługi AuthService. tzn. znak zapytania oznacza, że ​​nie został rozwiązany przez DI.

Stamtąd wystarczy oddzielić 2 usługi, restrukturyzując kod.

Wystąpił ten błąd przez błędne wpisanie nazwy usługi, tj. Konstruktora (private myService: MyService ).

W przypadku usług z błędami pisarskimi byłem w stanie ustalić, która usługa była problemem (miałem kilka wymienionych w konstruktorze), sprawdzając stronę w Chrome-> Console. Zobaczysz jako część wiadomości listę tablic „parametrów”, wyświetlając obiekt Obiekt, obiekt Obiekt,? (czy jakoś tak). Zauważ, gdzie „?” jest i to jest pozycja usługi, która powoduje problem.

Chociaż zamawianie można było wspomnieć eksportowanych klas z beczek, poniższy scenariusz może również dać ten sam efekt.

Załóżmy, że masz zajęcia A, Bi Cwywożone ze w tym samym pliku, gdzie Azależy Bi C:

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

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

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

Ponieważ klasy zależne (tj. W tym przypadku klasy Bi C) nie są jeszcze znane Angularowi ( prawdopodobnie w czasie wykonywania podczas procesu wstrzykiwania zależności Angulara do klasyA ) błąd jest zgłaszany.

Rozwiązanie

Rozwiązaniem jest zadeklarowanie i wyeksportowanie klas zależnych przed klasą, w której wykonano DI.

tzn. w powyższym przypadku klasa Ajest zadeklarowana zaraz po zdefiniowaniu jej zależności:

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

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

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

W moim przypadku eksportowałem klasę i enum z tego samego pliku komponentu:

mComponent.component.ts:

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

Potem próbowałem użyć MyEnumod dziecka z MyComponentClass. To spowodowało błąd Nie można rozwiązać wszystkich parametrów .

Przeniesienie MyEnumdo osobnego folderu od MyComponentClassrozwiązało mój problem!

Jak wspomniał Günter Zöchbauer, dzieje się tak, ponieważ usługa lub komponent jest zależny cyklicznie.

Jeśli twoja usługa jest zdefiniowana w tym samym pliku co składnik (który ją zużywa), a usługa jest zdefiniowana później komponencie w pliku, możesz otrzymać ten błąd. Wynika to z tego samego problemu „forwardRef”, o którym wspominali inni. W tej chwili VSCode nie jest świetny w pokazywaniu tego błędu, a kompilacja się kompiluje.

Uruchomienie kompilacji --aotmoże maskować ten problem ze względu na sposób działania kompilatora (prawdopodobnie związany z drżeniem drzewa).

Rozwiązanie: Upewnij się, że usługa jest zdefiniowana w innym pliku lub przed definicją komponentu. (Nie jestem pewien, czy w tym przypadku można użyć forwardRef, ale wydaje się to niezdarne).

Jeśli mam bardzo prostą usługę, która jest bardzo mocno związana z komponentem (coś w rodzaju modelu widoku) - np. ImageCarouselComponent, Mogę to nazwać, ImageCarouselComponent.service.tsżeby nie pomieszało się z moimi innymi usługami.

W moim przypadku było to okrągłe odniesienie. Miałem MyService dzwoniąc do Myservice2 i MyService2 dzwoniąc do MyService.

Niedobrze :(

W moim przypadku powodem było:

• moja usługa wstrzykiwania A rozszerzyła kolejną klasę B.
• B miał konstruktora, który wymagał argumentu
• Nie zdefiniowałem żadnego konstruktora w A.

W rezultacie próba utworzenia obiektu A nie powiodła się domyślny konstruktor. Nie mam pojęcia, dlaczego nie był to błąd kompilacji.

Naprawiłem to, dodając konstruktor w A, który poprawnie nazwał konstruktorem B.

Gotcha!

Jeśli żadna z powyższych odpowiedzi nie pomogła, być może importujesz jakiś element z tego samego pliku, w którym składnik wstrzykuje usługę.

Wyjaśniam lepiej:

To jest plik usługi :

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

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

To jest plik komponentu :

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

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

Powoduje to problemy, nawet jeśli symbol nie znajduje się w tym samym komponencie, ale tylko w tym samym pliku. Przenieś symbol (może to być funkcja, stała, klasa itd.) W inne miejsce, a błąd zniknie

dla wersji kątowej 6 i nowszych spróbuj

@Injectable({
  providedIn: 'root'
})

.. tuż nad klasą usług, bez żadnych innych linii pośrednich

Zalety

• nie trzeba dodawać usługi do żadnego modułu (zostanie „automatycznie wykryty”)
• usługa będzie singletonem (ponieważ zostanie wstrzyknięta do katalogu głównego)

[ dokumenty kątowe ]