PENGECUALIAN: Tidak dapat menyelesaikan semua parameter

Saya telah membangun aplikasi dasar di Angular 2, tetapi saya telah menemukan masalah aneh di mana saya tidak dapat menyuntikkan layanan ke salah satu komponen saya. Ini menyuntikkan dengan baik ke salah satu dari tiga komponen lain yang telah saya buat.

Sebagai permulaan, ini adalah layanan:

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

}

Dan komponen yang menolak untuk bekerja dengannya:

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

}

Kesalahan yang saya dapatkan di konsol browser adalah ini:

PENGECUALIAN: Tidak dapat menyelesaikan semua parameter untuk HeaderComponent: (?).

Saya memiliki layanan dalam fungsi bootstrap sehingga ia memiliki penyedia. Dan saya tampaknya dapat menyuntikkannya ke dalam konstruktor komponen saya yang lain tanpa masalah.

Impor dari file yang dinyatakan langsung bukan pada laras.

Saya tidak tahu persis apa yang menyebabkan masalah ini tetapi saya melihatnya beberapa kali (mungkin semacam ketergantungan sirkuler).

Itu juga harus diperbaiki dengan mengubah urutan ekspor dalam barel (tidak tahu detail, tetapi disebutkan juga)

Selain jawaban sebelumnya yang diberikan, tampaknya kesalahan ini juga terjadi ketika layanan injeksi Anda tidak ada @Injectable() dekorator yang . Jadi sebelum Anda men-debug hal ketergantungan siklik dan urutan impor / ekspor Anda, lakukan pemeriksaan sederhana apakah layanan Anda benar-benar telah @Injectable()ditentukan.

Ini berlaku untuk Angular terbaru saat ini, Angular 2.1.0.

Saya membuka masalah tentang hal ini .

Pada Angular 2.2.3sekarang ada forwardRef()fungsi utilitas yang memungkinkan Anda untuk menyuntikkan penyedia yang belum ditentukan.

Dengan tidak didefinisikan, maksud saya bahwa peta injeksi ketergantungan tidak tahu pengenal. Inilah yang terjadi selama dependensi melingkar. Anda dapat memiliki dependensi melingkar dalam Angular yang sangat sulit untuk dilepaskan dan dilihat.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

Menambahkan @Inject(forwardRef(() => MobileService))ke parameter konstruktor dalam kode sumber pertanyaan asli akan memperbaiki masalah.

Referensi

Manual Angular 2: ForwardRef

Teruskan referensi dalam Angular 2

SALAH # 1: Lupa Penghias:

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

SALAH # 2: Menghilangkan Simbol "@":

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

SALAH # 3: Menghilangkan Simbol "()":

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

SALAH # 4: Huruf kecil "i":

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

SALAH # 5: Anda lupa: impor {injectable} dari '@ angular / core';

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

BENAR:

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

Seperti yang telah dinyatakan, masalah ini disebabkan oleh pemesanan ekspor dalam barel yang disebabkan oleh dependensi melingkar.

Penjelasan lebih rinci ada di sini: https://stackoverflow.com/a/37907696/893630

Saya juga mengalami ini dengan menyuntikkan layanan A ke layanan B dan sebaliknya.

Saya pikir ini hal yang baik bahwa ini gagal dengan cepat karena mungkin harus dihindari . Jika Anda ingin layanan Anda menjadi lebih modular dan dapat digunakan kembali, yang terbaik adalah menghindari referensi melingkar sebanyak mungkin. Posting ini menyoroti jebakan di sekitarnya.

Karena itu, saya memiliki rekomendasi berikut:

• Jika Anda merasa kelas terlalu sering berinteraksi (saya berbicara tentang iri fitur ), Anda mungkin ingin mempertimbangkan menggabungkan 2 layanan menjadi 1 kelas .
• Jika hal di atas tidak bekerja untuk Anda, pertimbangkan untuk menggunakan layanan ke - 3 , (an EventService) yang dapat disuntikkan oleh kedua layanan untuk bertukar pesan.

Untuk kepentingan pencari; Saya mendapat kesalahan ini. Itu hanya simbol @ yang hilang.

Yaitu ini menghasilkan Can't resolve all parameters for MyHttpServicekesalahan.

Injectable()
export class MyHttpService{
}

Menambahkan @simbol yang hilang akan memperbaikinya.

@Injectable()
export class MyHttpService{
}

Dalam kasus saya, saya perlu menambahkan import "core-js/es7/reflect";aplikasi saya untuk membuat @Injectablepekerjaan.

Kemungkinan lain adalah tidak emitDecoratorMetadatadisetel ke true di tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Anda mendapatkan kesalahan ini jika Anda memiliki layanan A yang tergantung pada properti statis / metode layanan B dan layanan B itu sendiri tergantung pada layanan A melalui injeksi ketergantungan. Jadi itu semacam ketergantungan melingkar, meskipun bukan karena properti / metode statis. Mungkin bug yang terjadi dalam kombinasi dengan AOT .

Selain @Injectable()dekorator yang hilang

@Injectable()Dekorator yang hilang di kelas abstrak menghasilkan Tidak bisa menyelesaikan semua parameter untuk layanan: (?) Dekorator harus ada di dalam MyServicemaupun di kelas turunanBaseService

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

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

Dalam kasus saya, itu terjadi karena saya tidak mendeklarasikan tipe untuk parameter konstruktor.

Saya punya sesuatu seperti ini:

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

dan kemudian mengubahnya ke kode di bawah ini memecahkan masalah saya.

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

bagi saya itu hanya kekurangan ()di @Injectable. Proper adalah @Injectable ()

Menghapus parameter dari metode konstruktor () yang dapat dipecahkan menyelesaikannya untuk kasus saya.

Dalam kasus saya itu karena plugin Augury, nonaktifkan itu akan berfungsi dengan baik. Pilihan alternatif adalah aot, juga berfungsi.

semua kredit ke @ Boboss74, ia memposting jawabannya di sini: https://github.com/angular/angular/issues/23958

Bagi saya masalahnya lebih menyebalkan, saya menggunakan layanan di dalam layanan dan lupa menambahkannya sebagai ketergantungan pada appModule! Semoga ini membantu seseorang menghemat beberapa jam memecah aplikasi hanya untuk membangunnya kembali

Anda harus menambahkan array penyedia di dekorator @Component atau dalam modul tempat komponen Anda dideklarasikan. Di dalam komponen Anda dapat melakukan seperti di bawah ini:

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

Dalam kasus saya melewatkan parameter yang salah ke konstruktor menghasilkan kesalahan ini, ide dasar tentang kesalahan ini adalah bahwa Anda tanpa sadar melewati beberapa argumen salah untuk fungsi apa pun.

export class ProductComponent {
    productList: Array<Product>;

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

Saya memecahkan ini dengan hanya menghapus argumen itu.

Bagi saya, saya mendapatkan kesalahan ini ketika saya keliru menonaktifkan impor ini dalam file polyfills.ts, Anda harus memastikan itu diimpor untuk menghindari kesalahan itu.

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

Dalam kasus saya, saya mencoba memperluas " NativeDateAdapter" untuk mengganti format(date: Date, displayFormat: Object)metode " ".

Di AngularMaterial-2 DatePicker.

Jadi pada dasarnya saya lupa menambahkan @Injectableanotasi.

Setelah saya menambahkan ini ke kelas "CustomDateAdapter" saya:

@Injectable({
  providedIn: 'root'
})

Kesalahan telah terjadi.

Jawaban ini mungkin sangat membantu untuk masalah ini. Selain itu, untuk kasus saya, mengekspor layanan defaultadalah penyebabnya.

SALAH:

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

BENAR:

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

Ini bisa menjadi masalah yang sangat sulit untuk di-debug karena kurangnya umpan balik dalam kesalahan. Jika Anda khawatir tentang ketergantungan siklik yang sebenarnya, berikut adalah hal paling penting untuk dilihat dalam pelacakan tumpukan a) nama layanan b) parameter konstruktor dalam layanan yang memiliki tanda tanya misalnya jika terlihat seperti ini:

tidak dapat menyelesaikan semua parameter untuk AuthService: ([Objek objek], [Objek objek], [Objek objek], [Objek objek],?)

maka itu berarti parameter ke-5 adalah layanan yang juga bergantung pada AuthService. yaitu tanda tanya, berarti itu tidak diselesaikan oleh DI.

Dari sana, Anda hanya perlu memisahkan 2 layanan dengan merestrukturisasi kode.

Saya mengalami kesalahan ini dengan salah ketik nama layanan, yaitu konstruktor (private myService: MyService ).

Untuk layanan yang salah eja, saya dapat menentukan layanan mana yang menjadi masalah (saya telah mendaftarkan beberapa di konstruktor) dengan memeriksa halaman di Chrome-> Console. Anda akan melihat sebagai bagian dari pesan daftar array "parameter" dengan menampilkan Object objek, Object object,? (atau semacam itu). Perhatikan di mana "?" adalah dan itu adalah posisi layanan yang menyebabkan masalah.

Meskipun pemesanan kelas yang diekspor dari dalam tong mungkin telah disebutkan, skenario berikut ini juga dapat menghasilkan efek yang sama.

Misalkan Anda memiliki kelas A,, Bdan Cdiekspor dari dalam file yang sama di mana Atergantung Bdan C:

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

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

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

Karena kelas dependen (yaitu dalam hal ini kelas Bdan C) belum diketahui oleh Angular, ( mungkin pada saat run-time selama proses injeksi dependensi Angular pada kelasA ) kesalahan meningkat.

Larutan

Solusinya adalah mendeklarasikan dan mengekspor kelas-kelas dependen sebelum kelas di mana DI dilakukan.

yaitu dalam kasus di atas kelas Adideklarasikan tepat setelah dependensinya didefinisikan:

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

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

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

Dalam kasus saya, saya mengekspor Kelas dan Enum dari file komponen yang sama:

mComponent.component.ts:

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

Kemudian, saya mencoba menggunakan MyEnumdari seorang anak MyComponentClass. Itu menyebabkan kesalahan Can't diselesaikan semua parameter .

Dengan memindahkan MyEnumfolder terpisah dari MyComponentClass, itu memecahkan masalah saya!

Seperti yang dikatakan Günter Zöchbauer, ini terjadi karena suatu layanan atau komponen tergantung secara melingkar.

Jika layanan Anda didefinisikan dalam file yang sama dengan komponen (yang mengkonsumsinya) dan layanan ditentukan setelahnya komponen dalam file Anda mungkin mendapatkan kesalahan ini. Ini karena masalah 'forwardRef' yang sama yang disebutkan orang lain. Saat ini VSCode tidak hebat menunjukkan kesalahan ini dan build berhasil dikompilasi.

Menjalankan build with --aotcan mask masalah ini karena cara kerja kompiler (mungkin terkait dengan pengocokan pohon).

Solusi: Pastikan layanan didefinisikan dalam file lain atau sebelum definisi komponen. (Saya tidak yakin apakah forwardRef dapat digunakan dalam kasus ini, tetapi tampaknya kikuk melakukannya).

Jika saya memiliki layanan yang sangat sederhana yang sangat kuat terkait dengan komponen (semacam model tampilan) - misalnya. ImageCarouselComponent, Saya boleh menamainya ImageCarouselComponent.service.tssehingga tidak ikut campur dengan layanan saya yang lain.

Dalam kasus saya itu adalah referensi melingkar. Saya meminta MyService memanggil Myservice2 Dan MyService2 memanggil MyService.

Tidak baik :(

Dalam kasus saya, alasannya adalah sebagai berikut:

• layanan injeksi saya A memperluas kelas lain B
• B memiliki konstruktor yang membutuhkan argumen
• Saya belum mendefinisikan konstruktor apa pun di A

Akibatnya, ketika mencoba membuat objek A, konstruktor default gagal. Saya tidak tahu mengapa ini bukan kesalahan kompilasi.

Saya memperbaikinya dengan hanya menambahkan konstruktor di A, yang benar disebut konstruktor B.

Kena kau!

Jika tidak ada jawaban di atas yang membantu Anda, mungkin Anda mengimpor beberapa elemen dari file yang sama di mana komponen menyuntikkan layanan.

Saya jelaskan lebih baik:

Ini adalah file layanan :

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

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

Ini adalah file komponen :

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

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

Jadi itu menyebabkan masalah bahkan jika simbol tidak berada di dalam komponen yang sama, tetapi hanya di dalam file yang sama. Pindahkan simbol (bisa berupa fungsi, konstanta, kelas dan sebagainya ...) di tempat lain dan kesalahannya akan hilang

untuk versi sudut 6 dan yang lebih baru, coba

@Injectable({
  providedIn: 'root'
})

.. tepat di atas kelas layanan Anda tanpa garis lain di antaranya

keuntungan

• tidak perlu menambahkan layanan ke modul apa pun (akan "ditemukan secara otomatis")
• layanan akan menjadi singleton (karena akan disuntikkan ke root)

[ dokumen sudut ]