Błąd podczas próby wstrzyknięcia usługi do komponentu kątowego "wyjątek: nie można rozwiązać wszystkich parametrów komponentu", dlaczego?

Oprócz udzielonych wcześniej odpowiedzi, wydaje się, że ten błąd jest również wyrzucany, gdy Twoja usługa wstrzykiwania brakuje rzeczywistego dekoratora @Injectable(). Więc zanim debugujesz zależność cykliczną i kolejność importu/eksportu, wykonaj proste sprawdzenie, czy Twoja usługa rzeczywiście ma zdefiniowaną @Injectable().

Dotyczy to aktualnego kąta najnowszego, Angular 2.1.0.

Otworzyłem sprawę w tej sprawie .

Od Angular 2.2.3 istnieje teraz funkcja użytkowa forwardRef(), która pozwala na wprowadzanie dostawców, które nie zostały jeszcze zdefiniowane.

Przez nie zdefiniowany, mam na myśli, że mapa iniekcji zależności nie zna identyfikatora. To właśnie dzieje się podczas kołowych zależności. Możesz mieć kołowe zależności w kątach, które są bardzo trudne do rozplątania i zobaczenia.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

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

Referencje

Angular 2 Manual: ForwardRef

Forward reference in Angular 2

Błąd #1: zapominanie dekoratora:

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

Błąd # 2: pominięcie symbolu"@":

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

Błąd # 3: pominięcie symboli " ()":

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

Błąd # 4: małe litery "i":

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

Błąd # 5: zapomniałeś: import {Injectable} from '@ 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 kołowymi zależnościami.

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

Spotkałem się z tym również, wprowadzając usługę A do usługi B i vice versa.

Myślę, że dobrze, że to szybko się nie powiedzie, ponieważ i tak powinno się tego unikać. Jeśli chcesz, aby Twoje usługi były bardziej modułowe i wielokrotnego użytku, najlepiej unikać odniesień okrągłych w jak największym stopniu. Ten post podkreśla pułapki wokół tego.

Dlatego mam następujące zalecenia:

• Jeśli uważasz, że zajęcia wchodzą w interakcję zbyt często (mówię o feature envy ), warto rozważyć Połączenie 2 Usług w 1 klasę .
• Jeśli powyższe nie działa dla Ciebie, rozważ użycie trzeciej Usługi , (An EventService), którą obie usługi mogą wstrzyknąć w celu wymiany wiadomości.

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

Tzn. powoduje to błąd Can't resolve all parameters for MyHttpService.

Injectable()
export class MyHttpService{
}

Dodanie brakującego symbolu @ naprawia to.

@Injectable()
export class MyHttpService{
}

W moim przypadku musiałem dodać import "core-js/es7/reflect"; do mojego wniosku, aby @Injectable zadziałało.

Oprócz brakującego @Injectable() dekoratora

Missing @Injectable() decorator in abstract class produced the Can ' t resolve all parameters for service: (?) Dekorator musi być obecny w MyService, jak również w klasie pochodnej BaseService

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

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

Inną możliwością jest brak ustawienia emitDecoratorMetadata na true w tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Pojawia się ten błąd, jeśli masz usługę A, która zależy od statycznej właściwości / metodyusługi B, a sama usługa Bzależy od usługi A poprzez zastrzyk zależności. Jest to więc rodzaj kołowej zależności, chociaż nie jest, ponieważ właściwość / metoda jest statyczna. Prawdopodobnie błąd, który występuje w połączeniu z AOT .

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

Miałem coś takiego:

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

A potem zmiana go na poniższy kod rozwiązała mój problem.

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

Dla mnie to był po prostu brak () w @Injectable. Proper is @Injectable ()

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

W moim przypadku to z powodu Plugin Augury, wyłączyć będzie działać dobrze. Alternatywną opcją jest aot, również działa.

Wszystkie podziękowania dla @ Boboss74, napisał odpowiedź tutaj: https://github.com/angular/angular/issues/23958

Ta odpowiedź może być bardzo pomocna w tym problemie. Dodatkowo w moim przypadku powodem był eksport usługi jako default.

Błąd:

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

Poprawny:

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

Cóż dla mnie problem był jeszcze bardziej irytujący, używałem usługi w ramach usługi i zapomniałem dodać go jako zależność w appModule! Mam nadzieję, że pomoże to komuś zaoszczędzić kilka godzin, rozkładając aplikację tylko po to, aby zbudować ją ponownie

Napotkałem ten błąd, wpisując błędnie nazwę usługi, np. konstruktor (private myService: MyService ).

W przypadku błędnych usług, byłem w stanie określić, która usługa jest problemem (miałem kilka wymienionych w konstruktorze), sprawdzając stronę w Chrome->Console. Wyświetli się jako część wiadomości lista tablic "parametr" wyświetlając obiekt Object, obiekt Object,? (lub coś w tym stylu). Zauważ, gdzie"?"jest i to jest stanowisko usługa, która powoduje problem.

Musisz dodać tablicę providers w dekoratorze @Component lub w module, w którym zadeklarowany jest Twój komponent. Wewnątrz komponentu możesz zrobić jak poniżej:

@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 błędnych parametrów konstruktorowi powoduje ten błąd, podstawową ideą o tym błędzie jest to, że nieświadomie przekazałeś błędne args 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, mam ten błąd, gdy omyłkowo wyłączony Ten import w polyfills.plik ts, musisz upewnić się, że jest importowany, 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 rozszerzyć "NativeDateAdapter" w celu nadpisania metody "format(date: Date, displayFormat: Object)".

Więc w zasadzie zapomniałem dodać @Injectable anotacji.

Po dodaniu tego do mojej klasy" CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

Błąd zniknął.

Może to być naprawdę trudny problem do debugowania z powodu braku informacji zwrotnej w błędzie. Jeśli jesteś zaniepokojony rzeczywistą zależnością cykliczną, oto najważniejsza rzecz do zajrzenia w ślad stosu 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 AuthService: ([object Object], [object Object], [object Object], [object Object],?)

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

Stamtąd, po prostu trzeba oddzielić 2 usługi poprzez restrukturyzację kodu.

Mam Cię!

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

Wyjaśnię lepiej:

To jest plik serwisu :

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

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

To jest składowa plik:

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

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

Powoduje więc problemy, nawet jeśli symbol nie znajduje się wewnątrz tego samego komponentu, ale tylko wewnątrz tego samego pliku. Przesuń symbol (może to być funkcja, stała, klasa i tak on..) gdzie indziej i błąd zniknie

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

Załóżmy, że masz zajęcia A, B, i C wyeksportowane z tego samego pliku, gdzie A zależy od B i C:

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

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

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

Ponieważ zależne klasy (tj. w tym przypadku klasy B i C) nie są jeszcze znane Angular, (prawdopodobnie w czasie uruchamiania podczas iniekcji zależności Angular proces na klasie A) błąd został podniesiony.

Rozwiązanie

Rozwiązaniem jest zadeklarowanie I wyeksportowanie klas zależnych przed klasą, w której odbywa się DI.

Tzn. w powyższym przypadku klasa A jest deklarowana 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 składowego:

mComponent.component.ts:

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

Potem próbowałem użyć MyEnum od dziecka MyComponentClass. To powodowało błąd Can ' t resolve all parameters error.

Poprzez przeniesienie MyEnum do osobnego folderu z MyComponentClass, to rozwiązało mój problem!

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

Jeśli usługa jest zdefiniowana w tym samym pliku co komponent (który go zużywa), a usługa jest zdefiniowana Po komponencie w pliku, może wystąpić ten błąd. Wynika to z tego samego problemu "spedytora", o którym wspominali inni. W tej chwili VSCode nie jest świetny w pokazywaniu tego błędu i kompilacji kompilacji pomyślnie.

Uruchomienie kompilacji z --aot może zamaskować 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 można w tym przypadku użyć spedytora, 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ę go nazwać ImageCarouselComponent.service.ts, aby nie pomieszał się z innymi moimi usługami.

W moim przypadku było to odniesienie kołowe. I had MyService calling Myservice2 I MyService2 dzwoni do MyService.

Nie dobrze: (

W moim przypadku powód był następujący:

• moja iniekcyjna usługa A Rozszerzona o kolejną klasę B
• B miał konstruktor, który wymagał argumentu
• nie zdefiniowałem żadnego konstruktora w

W konsekwencji, podczas próby utworzenia obiektu A, konstruktor domyślny nie powiódł się. Nie mam pojęcia, dlaczego to nie był błąd kompilacji.

Naprawiłem to po prostu dodając konstruktor w A, który poprawnie nazywał konstruktor B.

Dla angular 6 i nowszych wersji, spróbuj

@Injectable({
  providedIn: 'root'
})

..tuż nad twoją klasą usług bez innych linii pomiędzy

Zalety

• nie ma potrzeby dodawania usługi do dowolnego modułu (będzie "auto-odkryte")
W tym celu należy wykonać następujące czynności:]}

[angular docs ]