NgModule asoslari

Daraja:

@NgModule dekoratori modul metadata'sini belgilaydi — qaysi component'lar e'lon qilingan, qaysi modullar import, nima export va qaysi service provider sifatida ro'yxatdan o'tgan.

declarations — component, directive, pipe

Junior

Nima bu?

declarations — shu modulga tegishli va faqat shu modulda e'lon qilingan component, directive va pipe'lar ro'yxati. Har bir component faqat bitta NgModule'da declare qilinadi. Boshqa modulda ishlatish uchun exports orqali beriladi.

Kod misoli

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';
import { TruncatePipe } from './truncate.pipe';
import { UserCardComponent } from './user-card.component';

@NgModule({
  declarations: [
    UserCardComponent,
    HighlightDirective,
    TruncatePipe,
  ],
  imports: [CommonModule],
  exports: [UserCardComponent, TruncatePipe],
})
export class SharedUiModule {}

Imtihonda

Savol: Bir component ikki modulda declare qilinsa nima bo'ladi?

Javob: Build xato — "Component is declared in multiple modules". Har component bitta modulga tegishli.

Yodlash uchun

declarations = "meniki". Standalone component declare qilinmaydi — `imports` ga qo'shiladi.

imports — boshqa modullar

Junior

Nima bu?

imports — bu modul ishlatadigan boshqa modullar (yoki standalone component/directive/pipe). Import qilingan modulning exports qismi shu modul template'larida mavjud bo'ladi. CommonModule (*ngIf, *ngFor) deyarli har doim import qilinadi.

Kod misoli

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { SharedUiModule } from '../shared/shared-ui.module';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';

@NgModule({
  declarations: [ProductListComponent, ProductDetailComponent],
  imports: [
    CommonModule,           // *ngIf, *ngFor, pipe
    ReactiveFormsModule,    // reactive forms
    SharedUiModule,         // UserCardComponent, TruncatePipe
    RouterModule.forChild([
      { path: '', component: ProductListComponent },
      { path: ':id', component: ProductDetailComponent },
    ]),
  ],
})
export class ProductModule {}

Imtihonda

Savol: BrowserModule va CommonModule farqi?

Javob: BrowserModule — faqat root AppModule da (bir marta). U CommonModule + browser-specific provider'larni o'z ichiga oladi. Boshqa modullarda faqat CommonModule.

Yodlash uchun

imports = kerakli modullar. Root: BrowserModule. Qolgan: CommonModule + kerakli modullar.

exports — tashqariga berish

Junior

Nima bu?

exports — boshqa modullar import qilganda foydalanishiga ruxsat berilgan declaration'lar. Export qilinmagan component modul ichida ishlaydi, tashqarida yo'q. Re-export ham mumkin: import qilingan modulning export'ini o'z export'iga qo'shish.

Kod misoli

@NgModule({
  declarations: [ButtonComponent, IconComponent, InternalHelperComponent],
  imports: [CommonModule],
  exports: [
    ButtonComponent,    // tashqariga ochiq
    IconComponent,
    // InternalHelperComponent export qilinmadi — faqat modul ichida
  ],
})
export class UiModule {}

// Boshqa modul
@NgModule({
  declarations: [DashboardComponent],
  imports: [UiModule], // ButtonComponent, IconComponent ishlatish mumkin
})
export class DashboardModule {}

Imtihonda

Savol: Import qilingan modulning barcha component'lari avtomatik mavjudmi?

Javob: Yo'q. Faqat import qilingan modulning exports ro'yxatidagi elementlar mavjud.

Yodlash uchun

exports = "boshqalarga beraman". Import ≠ avtomatik access — export kerak.

providers — service instance

Junior

Nima bu?

providers — modul darajasida DI ro'yxati. Modul import qilinganda provider'lar injector'ga qo'shiladi. @Injectable({ providedIn: 'root' }) bo'lgan service'lar uchun modul providers kerak emas. Modul-scope singleton kerak bo'lsa providers ishlatiladi.

Kod misoli

@NgModule({
  declarations: [AdminPanelComponent],
  providers: [
    AdminGuard,
    AdminApiService, // faqat AdminModule scope (lazy bo'lsa alohida instance)
  ],
})
export class AdminModule {}

// Root module
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    // providedIn: 'root' bo'lmasa shu yerda
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Imtihonda

Savol: Lazy modul providers va root providers farqi?

Javob: Lazy modul alohida injector yaratadi — modul providers faqat shu lazy modul subtree uchun. Root provider butun ilova uchun.

Yodlash uchun

Zamonaviy: providedIn: 'root'. Modul providers: lazy scope yoki NgModule-specific service.

bootstrap — root component

Junior

Nima bu?

bootstrap — ilova ishga tushganda DOM'ga qo'shiladigan root component(lar) ro'yxati. Faqat root AppModule da ishlatiladi. platformBrowserDynamic().bootstrapModule(AppModule) orqali ishga tushadi. Standalone ilovada o'rniga bootstrapApplication(AppComponent) ishlatiladi.

Kod misoli

// app.module.ts (klassik)
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// main.ts (klassik)
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

// main.ts (standalone — zamonaviy)
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

Imtihonda

Savol: Feature module'da bootstrap bo'ladimi?

Javob: Yo'q. bootstrap faqat root modulda. Feature modul RouterModule.forChild() bilan route qo'shadi.

Yodlash uchun

bootstrap = root component. Faqat AppModule. Yangi loyiha: bootstrapApplication().