AOT Meta Veri Hataları

Aşağıda, karşılaşabileceğiniz meta veri hataları, açıklamaları ve önerilen düzeltmeleri verilmiştir.

Desteklenmeyen ifade formu

Derleyicinin kısıtlı ifade sözdizimi dışındaki dil özellikleri, aşağıdaki örnekte görüldüğü gibi bu hataya neden olabilir:

// HATA
export class Fooish { … }
…
const prop = typeof Fooish; // typeof meta veride geçerli değildir
  …
  // köşeli parantez gösterimi meta veride geçerli değildir
  { provide: 'token', useValue: { [prop]: 'value' } };
  …

Normal uygulama kodunda typeof ve köşeli parantez gösterimini kullanabilirsiniz. Sadece Angular meta verisini tanımlayan ifadelerde bu özellikleri kullanamazsınız.

Angular meta verisi yazarken derleyicinin kısıtlı ifade sözdizimine bağlı kalarak bu hatadan kaçının ve yeni veya alışılmadık TypeScript özelliklerine karşı dikkatli olun.

Yerel (dışa aktarılmamış) sembole referans

Derleyici, yerel olarak tanımlanmış ancak ya dışa aktarılmamış ya da başlatılmamış bir sembole başvuru buldu.

İşte sorunun bir provider örneği.

// HATA
let foo: number; // ne dışa aktarılmış ne de başlatılmış

@Component({
  selector: 'my-component',
  template: … ,
  providers: [
    { provide: Foo, useValue: foo }
  ]
})
export class MyComponent {}

Derleyici, bileşen fabrikasını ayrı bir modülde oluşturur ve bu fabrika useValue sağlayıcı kodunu içerir. O fabrika modülü, yerel (dışa aktarılmamış) foo değişkenine erişmek için bu kaynak modüle geri dönemez.

Sorunu foo'yu başlatarak düzeltebilirsiniz.

let foo = 42; // başlatılmış

Derleyici, ifadeyi sağlayıcıya şöyle yazmışsınız gibi katlar.

providers: [{provide: Foo, useValue: 42}];

Alternatif olarak, foo'nun çalışma zamanında değerini gerçekten bildiğinizde atanacağı beklentisiyle dışa aktararak düzeltebilirsiniz.

// DÜZELTİLMİŞ
export let foo: number; // dışa aktarılmış

@Component({
  selector: 'my-component',
  template: … ,
  providers: [
    { provide: Foo, useValue: foo }
  ]
})
export class MyComponent {}

export eklemek genellikle providers ve animations gibi meta verilerde referans verilen değişkenler için işe yarar çünkü derleyici bu ifadelerde dışa aktarılmış değişkenlere referanslar oluşturabilir. Bu değişkenlerin değerlerine ihtiyaç duymaz.

Derleyicinin kod oluşturmak için gerçek değere ihtiyaç duyduğunda export eklemek işe yaramaz. Örneğin, template özelliği için işe yaramaz.

// HATA
export let someTemplate: string; // dışa aktarılmış ama başlatılmamış

@Component({
  selector: 'my-component',
  template: someTemplate,
})
export class MyComponent {}

Derleyicinin bileşen fabrikasını oluşturmak için template özelliğinin değerine hemen şimdi ihtiyacı vardır. Tek başına değişken referansı yetersizdir. Bildirimin başına export eklemek yalnızca yeni bir hata üretir: "Only initialized variables and constants can be referenced".

Yalnızca başlatılmış değişkenler ve sabitler

Derleyici, dışa aktarılmış ancak başlatılmamış bir değişkene veya statik alana referans buldu. Kod oluşturmak için o değişkenin değerine ihtiyaç duyar.

Aşağıdaki örnek, bileşenin template özelliğini, bildirilmiş ancak atanmamış olan dışa aktarılmış someTemplate değişkeninin değerine ayarlamaya çalışır.

// HATA
export let someTemplate: string;

@Component({
  selector: 'my-component',
  template: someTemplate,
})
export class MyComponent {}

someTemplate'i başka bir modülden içe aktarırsanız ve orada başlatmayı ihmal ederseniz de bu hatayı alırsınız.

// HATA - orada da başlatılmamış
import {someTemplate} from './config';

@Component({
  selector: 'my-component',
  template: someTemplate,
})
export class MyComponent {}

Derleyici, şablon bilgisini almak için çalışma zamanını bekleyemez. Şablona dayalı öğeyi oluşturma talimatlarını içeren bileşen fabrikasını üretebilmek için someTemplate değişkeninin değerini kaynak koddan statik olarak türetmelidir.

Bu hatayı düzeltmek için, değişkenin başlangıç değerini aynı satırda bir başlatıcı yan tümcesi ile sağlayın.

// DÜZELTİLMİŞ
export let someTemplate = '<h1>Greetings from Angular</h1>';

@Component({
  selector: 'my-component',
  template: someTemplate,
})
export class MyComponent {}

Dışa aktarılmamış sınıfa referans

Meta veri, dışa aktarılmamış bir sınıfa referans verdi.

Örneğin, bir sınıf tanımlamış ve onu bir providers dizisinde enjeksiyon belirteci olarak kullanmış ancak o sınıfı dışa aktarmayı ihmal etmiş olabilirsiniz.

// HATA
abstract class MyStrategy { }

  …
  providers: [
    { provide: MyStrategy, useValue: … }
  ]
  …

Angular, ayrı bir modülde bir sınıf fabrikası oluşturur ve bu fabrika yalnızca dışa aktarılmış sınıflara erişebilir. Bu hatayı düzeltmek için referans verilen sınıfı dışa aktarın.

// DÜZELTİLMİŞ
export abstract class MyStrategy { }

  …
  providers: [
    { provide: MyStrategy, useValue: … }
  ]
  …

Dışa aktarılmamış fonksiyona referans

Örneğin, bir providers useFactory özelliğini yerel olarak tanımlanmış ve dışa aktarmayı ihmal ettiğiniz bir fonksiyona ayarlamış olabilirsiniz.

// HATA
function myStrategy() { … }

  …
  providers: [
    { provide: MyStrategy, useFactory: myStrategy }
  ]
  …

Angular, ayrı bir modülde bir sınıf fabrikası oluşturur ve bu fabrika yalnızca dışa aktarılmış fonksiyonlara erişebilir. Bu hatayı düzeltmek için fonksiyonu dışa aktarın.

// DÜZELTİLMİŞ
export function myStrategy() { … }

  …
  providers: [
    { provide: MyStrategy, useFactory: myStrategy }
  ]
  …

Parçalanmış değişken veya sabit desteklenmiyor

Derleyici, parçalama ile atanmış değişkenlere yapılan referansları desteklemez.

Örneğin, şöyle bir şey yazamazsınız:

// HATA
import { configuration } from './configuration';

// foo ve bar'a parçalanmış atama
const {foo, bar} = configuration;
  …
  providers: [
    {provide: Foo, useValue: foo},
    {provide: Bar, useValue: bar},
  ]
  …

Bu hatayı düzeltmek için parçalanmamış değerlere başvurun.

// DÜZELTİLMİŞ
import { configuration } from './configuration';
  …
  providers: [
    {provide: Foo, useValue: configuration.foo},
    {provide: Bar, useValue: configuration.bar},
  ]
  …

Tür çözümlenemedi

Bu, ortam türüne başvurduğunuzda olabilir. Örneğin, Window türü global .d.ts dosyasında bildirilen bir ortam türüdür.

Derleyicinin statik olarak analiz etmesi gereken bileşen yapıcısında başvurursanız bir hata alırsınız.

// HATA
@Component({ })
export class MyComponent {
  constructor (private win: Window) { … }
}

TypeScript ortam türlerini anlar, bu nedenle onları içe aktarmazsınız. Angular derleyicisi, dışa aktarmayı veya içe aktarmayı ihmal ettiğiniz bir türü anlamaz.

Bu durumda, derleyici Window belirteci ile bir şeyin nasıl enjekte edileceğini anlamaz.

Meta veri ifadelerinde ortam türlerine başvurmayın.

Bir ortam türünün örneğini enjekte etmeniz gerekiyorsa, sorunu dört adımda çözebilirsiniz:

1. Ortam türünün bir örneği için bir enjeksiyon belirteci oluşturun.
2. O örneği döndüren bir fabrika fonksiyonu oluşturun.
3. O fabrika fonksiyonuyla bir useFactory sağlayıcısı ekleyin.
4. Örneği enjekte etmek için @Inject kullanın.

İşte açıklayıcı bir örnek.

// DÜZELTİLMİŞ
import { Inject } from '@angular/core';

export const WINDOW = new InjectionToken('Window');
export function _window() { return window; }

@Component({
  …
  providers: [
    { provide: WINDOW, useFactory: _window }
  ]
})
export class MyComponent {
  constructor (@Inject(WINDOW) private win: Window) { … }
}

Yapıcıdaki Window türü artık derleyici için sorun değildir çünkü enjeksiyon kodunu oluşturmak için @Inject(WINDOW)'ı kullanır.

Angular, tarayıcının document nesnesini (veya uygulamanın çalıştığı platforma bağlı olarak onun bir soyutlamasını) enjekte edebilmeniz için DOCUMENT belirteci ile benzer bir şey yapar.

import { Inject }   from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({ … })
export class MyComponent {
  constructor (@Inject(DOCUMENT) private doc: Document) { … }
}

Ad bekleniyor

Bu, aşağıdaki örnekte olduğu gibi özellik adı olarak bir sayı kullandığınızda olabilir.

// HATA
provider: [{provide: Foo, useValue: {0: 'test'}}];

Özelliğin adını sayısal olmayan bir değere değiştirin.

// DÜZELTİLMİŞ
provider: [{provide: Foo, useValue: {'0': 'test'}}];

Desteklenmeyen enum üye adı

Derleyici basit enum değerlerini anlayabilir ancak hesaplanan özelliklerden türetilenler gibi karmaşık değerleri anlayamaz.

// HATA
enum Colors {
  Red = 1,
  White,
  Blue = "Blue".length // hesaplanmış
}

  …
  providers: [
    { provide: BaseColor,   useValue: Colors.White } // sorunsuz
    { provide: DangerColor, useValue: Colors.Red }   // sorunsuz
    { provide: StrongColor, useValue: Colors.Blue }  // hatalı
  ]
  …

Karmaşık başlatıcılara veya hesaplanan özelliklere sahip enum'lara başvurmaktan kaçının.

Etiketli şablon ifadeleri desteklenmiyor

Derleyici, aşağıdaki gibi bir JavaScript ES2015 etiketli şablon ifadesiyle karşılaştı.

// HATA
const expression = 'funky';
const raw = String.raw`A tagged template ${expression} string`;
 …
 template: '<div>' + raw + '</div>'
 …

String.raw(), JavaScript ES2015'e özgü bir etiket fonksiyonudur.

AOT derleyicisi etiketli şablon ifadelerini desteklemez; meta veri ifadelerinde bunlardan kaçının.

Sembol referansı bekleniyor

Bu hata, bir sınıfın extends yan tümcesinde bir ifade kullandığınızda oluşabilir.