Angular 12–13

Daraja:

Angular 12 va 13 — Ivy runtime'ning to'liq default bo'lishi va View Engine'dan voz kechish davri. Mavjud loyihalarni yangilash va strict TypeScript rejimiga o'tish shu versiyalarda muhim bo'ldi.

Ivy — default runtime, View Engine o'chirildi

Middle

Nima bu?

Ivy — Angular 8 da ixtiyoriy (opt-in), Angular 9 dan boshlab default compile/render engine. Angular 12 da View Engine deprecated deb e'lon qilindi (hali ngcc orqali ishlar edi), Angular 13 da esa View Engine butunlay olib tashlandi va Ivy yagona engine bo'lib qoldi. Ivy kichikroq bundle, tezroq build, yaxshiroq tree-shaking va har bir component uchun aniq dependency grafigi beradi. ngcc (Angular Compatibility Compiler) Angular 13+ da node_modules uchun kamroq kerak bo'ldi.

Kod misoli

// Ivy — har component mustaqil compile
@Component({
  selector: 'app-user-card',
  standalone: false, // Angular 12–13: hali NgModule asosiy
  template: `<h2>{{ user.name }}</h2>`,
})
export class UserCardComponent {
  @Input() user!: User;
}

// angular.json — Ivy default (Angular 9+)
// Angular 13: View Engine butunlay olib tashlandi, "enableIvy" endi kerak emas

// Build hajmi taqqoslash (View Engine vs Ivy):
// Ivy: faqat ishlatilgan directive/pipe bundle'ga kiradi

Imtihonda

  • Ivy va View Engine farqi nima?
  • Angular 13 da nima uchun View Engine olib tashlandi?

Yodlash uchun

Ivy = default 9+ (12 da View Engine deprecated, 13 da olib tashlandi), kichik bundle, tez build.

Ivy tufayli Standalone Components (14) va Signals (16+) imkoniyatlari rivojlandi — bitta compile pipeline.

Strict mode — tsconfig yangilanishlar

Middle

Nima bu?

Angular 12+ yangi loyihalar strict mode bilan yaratiladi: strictTemplates, strictInjectionParameters, strictInputAccessModifiers. Template'da null safety, @Input() majburiy tip, inject() parametrlari tekshiriladi. Xatolarni compile vaqtida ushlash — runtime bug kamayadi. Mavjud loyihada bosqichma-bosqich yoqish mumkin.

Kod misoli

// tsconfig.json
{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictNullInputTypes": true
  }
}

// strictTemplates — template xato compile vaqtida
@Component({
  template: `
    <!-- Xato: user possibly undefined -->
    <p>{{ user.name }}</p>
    <!-- To'g'ri -->
    <p>{{ user?.name }}</p>
  `,
})
export class ProfileComponent {
  user: User | undefined;
}

// strictInjectionParameters
@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {} // HttpClient inject qilinmagan bo'lsa xato
}

Imtihonda

  • strictTemplates nima beradi?
  • Legacy loyihada strict mode qanday yoqiladi?

Yodlash uchun

Strict = compile vaqtida xato. strictTemplates = template type check.

Angular 14 Typed Forms strict mode bilan yaxshi integratsiya — FormControl<T> tip xavfsizligi.