İSTİSNA: Tüm parametreler çözülemiyor

Angular 2'de temel bir uygulama oluşturdum, ancak bileşenlerimden birine bir hizmet enjekte edemediğim garip bir sorunla karşılaştım. Bununla birlikte, oluşturduğum diğer üç bileşenden herhangi birine ince bir şekilde enjekte eder.

Yeni başlayanlar için bu hizmet:

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

}

Ve çalışmayı reddettiği bileşen:

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

}

Tarayıcı konsolunda aldığım hata şudur:

İSTİSNA: HeaderComponent: (?) İçin tüm parametreler çözülemiyor.

Bu yüzden bir sağlayıcı var bootstrap işlevinde hizmet var. Ve bunu herhangi bir bileşenimin yapıcısına sorunsuz bir şekilde enjekte edebiliyor gibiyim.

Varil yerine doğrudan bildirildiği dosyadan içe aktarın.

Soruna tam olarak neyin neden olduğunu bilmiyorum ama birkaç kez bahsettiğini gördüm (muhtemelen bir çeşit dairesel bağımlılık).

Ayrıca, namludaki ihracatın sırasını değiştirerek de düzeltilebilir olmalıdır (detayları bilmiyorum, ama bundan da bahsedildi)

Daha önce verilen cevaplara ek olarak, enjekte edilebilir servisiniz gerçek @Injectable()dekoratörü kaçırdığında da bu hata atıldı . Dolayısıyla, döngüsel bağımlılık olayını ve ithalat / ihracat siparişinizin hatalarını ayıklamadan önce, hizmetinizin gerçekten @Injectable()tanımlanmış olup olmadığını basit bir şekilde kontrol edin .

Bu, geçerli Açısal en son Açısal 2.1.0 için geçerlidir.

Bu konuda bir konu açtım .

Açısal olarak 2.2.3, forwardRef()henüz tanımlanmamış sağlayıcıları enjekte etmenizi sağlayan bir yardımcı program işlevi vardır.

Tanımlanmadığında, bağımlılık enjeksiyon haritasının tanımlayıcıyı bilmediğini kastediyorum. Dairesel bağımlılıklar sırasında olan şey budur. Açısal'da çözülmesi ve görülmesi çok zor olan dairesel bağımlılıklarınız olabilir.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

@Inject(forwardRef(() => MobileService))Orijinal sorunun kaynak kodunda yapıcı parametresine eklemek sorunu çözecektir.

Referanslar

Açısal 2 Manuel: ForwardRef

İleri referanslar in Angular 2

YANLIŞ # 1: Dekoratörü Unutmak:

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

YANLIŞ # 2: "@" Sembolünü atlamak:

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

YANLIŞ # 3: "()" Sembollerini Atlama:

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

YANLIŞ # 4: Küçük harf "i":

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

YANLIŞ # 5: Unuttun: {Enjektabl} '@ açısal / çekirdek'ten içe aktar;

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

DOĞRU:

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

Daha önce de belirtildiği gibi, konu varil içindeki dairesel siparişlerin neden olduğu ihracat siparişinden kaynaklanmaktadır.

Daha ayrıntılı bir açıklama burada: https://stackoverflow.com/a/37907696/893630

Ayrıca, A hizmetini B hizmetine enjekte ederek ya da tam tersini yaparak karşılaştım.

Herhalde kaçınılması gerektiği için bunun hızlı bir şekilde başarısız olması iyi bir şey . Hizmetlerinizin daha modüler ve yeniden kullanılabilir olmasını istiyorsanız, döngüsel referanslardan mümkün olduğunca kaçınmak en iyisidir. Bu yazı bunu çevreleyen tuzakları vurgular.

Bu nedenle, aşağıdaki önerilere sahibim:

• Sınıfların çok sık etkileşime girdiğini düşünüyorsanız ( özellik kıskançlığından bahsediyorum ), 2 hizmeti 1 sınıfa birleştirmeyi düşünebilirsiniz .
• Yukarıdaki işi sizin için değilse, bir kullanmayı düşünün 3 hizmetini , (bir EventServiceiki hizmet alışverişi mesajlar için enjekte olabilir).

Arama yapanların yararına; Bu hatayı aldım. Basitçe eksik bir @ simgesiydi.

Ie Bu Can't resolve all parameters for MyHttpServicehatayı üretir .

Injectable()
export class MyHttpService{
}

Eksik @sembolü eklemek sorunu çözer.

@Injectable()
export class MyHttpService{
}

Benim durumumda, iş import "core-js/es7/reflect";yapmak için başvuruma eklemem gerekiyordu @Injectable.

Başka bir olasılık emitDecoratorMetadatatsconfig.json içinde true değerine ayarlanmamıştır

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Eğer hizmet varsa bu hatayı alıyorum A bir bağlıdır statik özellik / yöntemin hizmeti ait B ve hizmet B kendisi hizmet bağlıdır A oluk bağımlılık enjeksiyon. Dolayısıyla, özellik / yöntem statik olduğu için olmasa da, bir tür dairesel bağımlılıktır. Muhtemelen AOT ile birlikte oluşan bir hata .

Kayıp @Injectable()dekoratöre ek olarak

@Injectable()Soyut sınıfta eksik dekoratör üretildi Hizmet için tüm parametreler çözülemiyor: (?) Dekoratörün MyServicetüretilmiş sınıfta olduğu gibi mevcut olması gerekirBaseService

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

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

Benim durumumda, bir yapıcı parametresi için tür bildirmediğim için oldu.

Ben böyle bir şey vardı:

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

ve aşağıdaki kodla değiştirmek sorunumu çözdü.

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

benim için sadece ()@Injectable eksikliği vardı. Uygun @Injectable ()

Enjekte edilebilir yapıcı () yönteminden parametreleri kaldırmak benim durumum için çözdü.

Benim durumumda bu Augury eklentisi nedeniyle, devre dışı iyi çalışacaktır. Alternatif seçenek aot, aynı zamanda çalışıyor.

@ Boboss74'e verilen tüm krediler, cevabı buraya gönderdi: https://github.com/angular/angular/issues/23958

Benim için sorun daha da sinir bozucuydu, bir hizmet içinde bir hizmet kullanıyordum ve appModule'de bağımlılık olarak eklemeyi unuttum! Bu birisinin sadece tekrar kurmak için uygulamayı bozarak birkaç saat kazanmasına yardımcı olmasını umuyoruz

@Component dekoratörüne veya bileşeninizin bildirildiği modüle sağlayıcılar dizisi eklemeniz gerekir. İç bileşen şunları yapabilirsiniz:

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

Benim durumumda yapıcı yanlış parametreler geçirerek bu hatayı üretir, bu hata hakkında temel fikir bilmeden herhangi bir fonksiyona bazı yanlış argümanlar geçirmiş olmasıdır.

export class ProductComponent {
    productList: Array<Product>;

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

Bunu sadece bu argümanı kaldırarak çözdüm.

Benim için, polyfills.ts dosyasında bu içe aktarmayı yanlışlıkla devre dışı bıraktığımda bu hatayı aldım, bu hatayı önlemek için içe aktarıldığından emin olmanız gerekir.

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

Benim durumumda NativeDateAdapter" format(date: Date, displayFormat: Object)" yöntemini geçersiz kılmak için " " genişletmeye çalışıyordum .

AngularMaterial-2 DatePicker öğesinde.

Temelde açıklama eklemek unuttum @Injectable.

Bunu "CustomDateAdapter" sınıfına ekledikten sonra:

@Injectable({
  providedIn: 'root'
})

Hata gitti.

Bu yanıt bu sorun için çok yararlı olabilir. Ayrıca, benim durumum için default, neden olarak hizmet ihracat .

YANLIŞ:

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

DOĞRU:

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

Bu, hatadaki geri bildirim eksikliğinden dolayı hata ayıklamak için gerçekten zor bir sorun olabilir. Gerçek bir döngüsel bağımlılıktan endişe ediyorsanız, yığın izlemesinde bakmanız gereken en önemli şey a) hizmetin adı b) bu ​​hizmette soru işareti olan yapıcı parametresi, örneğin şu şekilde görünüyorsa:

AuthService için tüm parametreleri çözemezsiniz: ([object Object], [object Object], [object Object], [object Object],?)

5. parametrenin AuthService'e de bağlı olan bir hizmet olduğu anlamına gelir. yani soru işareti, DI tarafından çözülmediği anlamına gelir.

Oradan, kodu yeniden yapılandırarak 2 hizmeti ayırmanız yeterlidir.

Hizmetin adını, yani yapıcı (özel myService: MyService ) yanlış yazarak bu hatayla karşılaştım .

Yanlış yazılmış hizmetler için, sayfayı Chrome-> Konsol'da inceleyerek hangi hizmetin sorun olduğunu belirleyebildim (yapıcıda birkaç tane listeledim). Object, object Object,? Nesnesini görüntüleyerek iletinin bir parçası olarak "parametre" dizi listesini göreceksiniz. (ya da böyle bir şey). Nerede "?" ve soruna neden olan hizmetin konumudur.

Sipariş rağmen boruları içinde dışa sınıfları söz edilmiş olabilir, şu senaryo, aynı etkiyi üretebilir.

Eğer sınıfları olduğunu varsayalım A, Bve Caynı dosya içinde ihraç Abağlıdır Bve C:

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

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

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

Beri bağımlı (bu durumda sınıflarında yani sınıflar Bve C) henüz (açısal, bilinmemektedir sınıfına açısal bağımlılığı enjeksiyon işlemi sırasında muhtemelen çalışma anındaA ) hata ortaya çıkar.

Çözüm

Çözüm, DI'nin yapıldığı sınıftan önce bağımlı sınıfları beyan etmek ve ihraç etmektir.

yani yukarıdaki durumda sınıf A, bağımlılıkları tanımlandıktan hemen sonra bildirilir:

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

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

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

Benim durumumda, aynı bileşen dosyasından bir Sınıf ve bir Numaralandırma verdim:

mComponent.component.ts:

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

Sonra MyEnumbir çocuktan kullanmaya çalışıyordum MyComponentClass. Tüm parametreler çözülemedi hatasına neden oluyordu .

Konumundan MyEnumayrı bir klasöre taşınarak MyComponentClasssorunum çözüldü!

Günter Zöchbauer'in belirttiği gibi, bu bir servis veya bileşen dairesel olarak bağımlı olduğu için oluyor.

Hizmetiniz bir bileşenle aynı dosyada tanımlanıyorsa (onu tüketir) ve hizmet daha sonra tanımlanırsa dosyadaki bileşenden bu hatayı alabilirsiniz. Bu, diğerlerinin bahsettiği aynı 'forwardRef' sorunundan kaynaklanmaktadır. Şu anda VSCode size bu hatayı göstermek konusunda büyük değildir ve derleme başarıyla derlenir.

Derlemenin çalıştırılması, --aotderleyicinin çalışma şekli nedeniyle bu sorunu maskeleyebilir (muhtemelen ağaç sallama ile ilgili).

Çözüm: Hizmetin başka bir dosyada veya bileşen tanımından önce tanımlandığından emin olun. (Bu durumda forwardRef'in kullanılabileceğinden emin değilim, ama bunu yapmak beceriksiz görünüyor).

Eğer çok güçlü bir bileşene (görünüm modeli gibi bir tür) bağlı çok basit bir hizmet varsa - örn. ImageCarouselComponent, Adlandırabilirim, ImageCarouselComponent.service.tsböylece diğer hizmetlerimle karıştırılmaz.

Benim durumumda dairesel bir referanstı. MyService'i Myservice2 ve MyService2'yi MyService olarak çağırdım.

İyi değil :(

Benim durumumda sebep şuydu:

• enjekte edilebilir servisim A başka bir B sınıfı genişletti
• B'nin argüman gerektiren bir kurucusu vardı
• A'da hiçbir kurucu tanımlamamıştım

Sonuç olarak, bir nesne A oluşturmaya çalışırken, varsayılan yapıcı başarısız oldu. Bunun neden derleme hatası olmadığı hakkında hiçbir fikrim yok.

A'ya B'nin yapıcısını doğru şekilde adlandıran bir yapıcı ekleyerek düzelttim.

Anladım!

Yukarıdaki yanıtlardan hiçbiri size yardımcı olmadıysa, belki aynı dosyadan bir öğe içe aktarıyorsunuzdur bir bileşenin hizmeti enjekte ettiği .

Daha iyi açıklarım:

Hizmet dosyası :

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

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

Bu bileşen dosyasıdır :

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

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

Bu nedenle, sembol aynı bileşenin içinde değil, aynı dosyanın içinde olsa bile sorunlara neden olur. Sembolü başka bir yere taşıyın (bir işlev, sabit, sınıf vb. Olabilir) ve hata kaybolur

açısal 6 ve daha yeni sürümler için deneyin

@Injectable({
  providedIn: 'root'
})

.. servis sınıfınızın hemen üzerinde, aralarında başka satır yok

avantajları

• hizmeti herhangi bir modüle eklemenize gerek yok ("otomatik olarak keşfedilecek")
• hizmet tekil olacaktır (kök içine enjekte edileceğinden)

[ açısal dokümanlar ]