ਸਟੈਂਡਅਲੋਨ ਕੰਪੋਨੈਂਟ ਕੀ ਹੁੰਦੇ ਹਨ?

Question

Accepted Answer

**ਸਟੈਂਡਅਲੋਨ ਕੰਪੋਨੈਂਟ** (Angular 14+, ਨਵੇਂ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਡਿਫਾਲਟ) ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ **ਇਸ ਦੀਆਂ ਆਪਣੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਸਿੱਧੇ ਘੋਸ਼ਣਾ ਕਰਨ** ਦੇਣ ਹਨ, ਇਸ ਤੋਂ ਬਿਨਾਂ ਕਿ `NgModule` ਨਾਲ ਸਬੰਧਤ ਹੋਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ। ਇਹ ਬਾਏਲਰਪਲੇਟ ਨੂੰ ਨਾਟਕੀ ਢੰਗ ਨਾਲ ਘਟਾਉਂਦੇ ਹਨ ਅਤੇ ਹੁਣ Angular ਐਪਸ ਬਣਾਉਣ ਦਾ ਸਿਫ਼ਾਰਸ਼ ਕੀਤਾ ਗਿਆ ਤਰੀਕਾ ਹਨ। ## ਇੱਕ ਸਟੈਂਡਅਲੋਨ ਕੰਪੋਨੈਂਟ ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` ਕੰਪੋਨੈਂਟ ਬਿਲਕੁਲ ਉਹੀ ਇਮਪੋਰਟ ਕਰਦਾ ਹੈ ਜੋ ਇਸ ਦਾ ਟੈਮਪਲੇਟ ਵਰਤਦਾ ਹੈ (`*ngFor` ਲਈ `CommonModule`, ਲਿੰਕਾਂ ਲਈ `RouterLink`) — ਇਸ ਦੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਸਪਸ਼ਟ ਅਤੇ ਸਹ-ਸਥਾਨਿਤ ਹਨ, ਇੱਕ ਵੱਖਰੇ `NgModule` ਵਿੱਚ ਘੋਸ਼ਣਾ ਕਰਨ ਦੀ ਬਜਾਏ। ## NgModules ਦੇ ਨਾਲ ਫਰਕ ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## ਸਟੈਂਡਅਲੋਨ ਐਪ ਬੂਟਸਟ੍ਰਾਪਿੰਗ (ਕੋਈ AppModule ਨਹੀਂ) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` ਸਟੈਂਡਅਲੋਨ ਐਪਸ ਰੂਟ `AppModule` ਨੂੰ `bootstrapApplication` ਅਤੇ **`provideX`** ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਬਦਲਦੀਆਂ ਹਨ — ਇੱਕ ਸਾਫ਼, ਫੰਕਸ਼ਨ-ਅਧਾਰਿਤ ਸਮਸ਼ਥਾ। ## ਫ਼ਾਇਦੇ ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## ਇਹ ਕਿਉਂ ਮਾਏਨੇ ਹੈ ਸਟੈਂਡਅਲੋਨ ਕੰਪੋਨੈਂਟ **Angular ਦੀ ਆਧੁਨਿਕ ਦਿਸ਼ਾ** ਹਨ — ਫ੍ਰੇਮਵਰਕ ਹੁਣ ਡਿਫ਼ਾਲਟ ਤੌਰ 'ਤੇ ਸਟੈਂਡਅਲੋਨ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਮਾਡਿਊਲਾਂ ਦੇ ਬਿਨਾਂ ਫੀਚਰ ਸਮਸ਼ਥਾ ਕਰਨ ਲਈ `provideX` ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਲੰਬੇ ਸਮੇਂ ਦੇ NgModule ਓਵਰਹੈਡ ਨੂੰ ਹਟਾਉਂਦੇ ਹਨ, ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਪਸ਼ਟ ਅਤੇ ਸਥਾਨਿਕ ਬਣਾਉਂਦੇ ਹਨ, ਅਤੇ ਲੇਜ਼ੀ ਲੋਡਿੰਗ ਅਤੇ ਸਮੁੱਚੇ ਮਾਨਸਿਕ ਮਾਡਲ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੇ ਹਨ। ਸਟੈਂਡਅਲੋਨ (ਅਤੇ `bootstrapApplication`/`provideRouter`/`provideHttpClient` ਸੇਟਅਪ) ਨੂੰ ਸਮਝਣਾ ਮੌਜੂਦਾ Angular ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ, ਜਦੋਂ ਕਿ NgModule ਜਾਣਕਾਰੀ ਵਿਰਾਸਤ ਕੋਡ ਲਈ ਅਭਿ ਵੀ ਲੋੜੀਂਦੀ ਹੈ।