Standalone vs NgModule

Daraja:

Angular 14+ standalone component'lar NgModule'siz ilova yaratish imkonini berdi. Angular 17+ da standalone — tavsiya etilgan yondashuv. Migration va micro-frontend mavzulari ham shu yerda.

bootstrapApplication() — NgModule'siz

Middle

Nima bu?

bootstrapApplication() — root standalone component'ni to'g'ridan-to'g'ri ishga tushiradi. AppModule kerak emas. Router, HttpClient va boshqa provider'lar providers array'ida beriladi (provideRouter, provideHttpClient).

Kod misoli

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
import { authInterceptor } from './app/core/auth.interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
}).catch((err) => console.error(err));

// app.component.ts
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent],
  template: `
    <app-header />
    <router-outlet />
  `,
})
export class AppComponent {}

Imtihonda

Savol: bootstrapApplication va bootstrapModule farqi?

Javob: bootstrapApplication — standalone, NgModule yo'q, provider'lar to'g'ridan-to'g'ri. bootstrapModule(AppModule) — klassik NgModule arxitektura.

Yodlash uchun

Yangi loyiha: bootstrapApplication + standalone root + provide* functions.

importProvidersFrom() — module'dan provider olish

Middle

Nima bu?

Ba'zi kutubxonalar hali NgModule export qiladi (StoreModule, TranslateModule). Standalone ilovada ularning provider'larini importProvidersFrom(NgModule) orqali olish mumkin — modul import qilmasdan faqat DI provider'lari olinadi.

Kod misoli

import { importProvidersFrom } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { TranslateModule } from '@ngx-translate/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),

    // NgModule provider'larini standalone'ga ko'chirish
    importProvidersFrom(
      BrowserAnimationsModule,
      StoreModule.forRoot({ user: userReducer }),
      EffectsModule.forRoot([UserEffects]),
      TranslateModule.forRoot({
        defaultLanguage: 'uz',
      }),
    ),
  ],
});

Imtihonda

Savol: importProvidersFrom modul component'larini ham import qiladimi?

Javob: Yo'q. Faqat modulning provider'lari (DI) olinadi. Component/directive/pipe alohida imports: [...] ga qo'shiladi yoki standalone bo'lishi kerak.

Yodlash uchun

Legacy NgModule lib → importProvidersFrom. Component → standalone imports. Bridge pattern migration uchun.

Migration schematic — ng generate @angular/core:standalone

Senior

Nima bu?

Angular CLI schematic — NgModule-based loyihani bosqichma-bosqich standalone'ga o'tkazish. Component'ni standalone qilish, NgModule'dan olib tashlash, bootstrapApplication'ga migratsiya. --mode=convert-to-standalone va --mode=standalone-bootstrap.

Kod misoli

# Angular yangilash
ng update @angular/core @angular/cli

# Bitta component'ni standalone qilish
ng generate @angular/core:standalone --mode=convert-to-standalone --path=src/app/shared/button/button.component.ts

# Butun ilovani standalone bootstrap'ga o'tkazish
ng generate @angular/core:standalone --mode=standalone-bootstrap

# NgModule'ni olib tashlash (component'lar standalone bo'lgandan keyin)
ng generate @angular/core:standalone --mode=prune-ng-modules

// Migration oldin
@NgModule({
  declarations: [UserListComponent],
  imports: [CommonModule],
})
export class UserModule {}

// Migration keyin
@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `...`,
})
export class UserListComponent {}

Imtihonda

Savol: Migration tartibi qanday?

Javob: 1) Component'larni standalone qilish. 2) standalone-bootstrap. 3) Bo'sh NgModule'larni prune-ng-modules. 4) Test va build tekshirish. Bir vaqtda hammasi emas — bosqichma-bosqich.

Yodlash uchun

Schematic: convert → bootstrap → prune. ng update birinchi. Git branch + test har bosqichda.

Module Federation — Webpack 5 micro-frontend

Senior

Nima bu?

Module Federation — Webpack 5 xususiyati. Bir nechta mustaqil deploy qilinadigan Angular ilovalar bir-birining modul/component'larini runtime'da yuklaydi. Shell (host) + Remote (micro-frontend) arxitektura. @angular-architects/module-federation plugin Angular CLI bilan integratsiya.

Kod misoli

# Host (shell) ilova yaratish
ng add @angular-architects/module-federation --project shell --type host

# Remote ilova qo'shish
ng generate @angular-architects/module-federation --project products --type remote

// shell/webpack.config.js (simplified)
module.exports = withModuleFederationPlugin({
  remotes: {
    products: 'http://localhost:4201/remoteEntry.js',
    orders: 'http://localhost:4202/remoteEntry.js',
  },
});

// shell routes — remote modul lazy yuklash
export const routes: Routes = [
  {
    path: 'products',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './ProductsModule',
      }).then((m) => m.ProductsModule),
  },
];

// Remote ilova — component export
// webpack.config.js
exposes: {
  './ProductsModule': './src/app/products/products.module.ts',
}

Imtihonda

Savol: Module Federation va oddiy lazy loading farqi?

Javob: Lazy loading — bitta ilova, bitta build, ichki chunk. Module Federation — alohida deploy qilingan ilovalar, runtime'da bir-biridan yuklanadi. Mustaqil jamoa, mustaqil release.

Yodlash uchun

Lazy = bitta app, ichki chunk. Federation = ko'p app, remoteEntry.js, mustaqil deploy. @angular-architects/module-federation.