Skip to main content Inicio Creadores beko2210 firstbrain angular-best-practices
angular-best-practices Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill angular-best-practicesEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
2 archivos name angular-best-practices description Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency. type skill created 2026-02-27T00:00:00.000Z domain software-development category frontend risk safe source self tags ["skill","software-development","frontend","angular"]
Angular Best Practices
Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
When to Use
Reference these guidelines when:
Writing new Angular components or pages
Implementing data fetching patterns
Reviewing code for performance issues
Refactoring existing Angular code
Optimizing bundle size or load times
Configuring SSR/hydration
Rule Categories by Priority
Priority Category Impact Focus 1 Change Detection CRITICAL Signals, OnPush, Zoneless 2 Async Waterfalls CRITICAL RxJS patterns, SSR preloading 3 Bundle Optimization CRITICAL Lazy loading, tree shaking 4 Rendering Performance HIGH @defer, trackBy, virtualization 5 Server-Side Rendering HIGH Hydration, prerendering 6 Template Optimization MEDIUM Control flow, pipes 7 State Management MEDIUM Signal patterns, selectors 8 Memory Management LOW-MEDIUM Cleanup, subscriptions
1. Change Detection (CRITICAL)
Use OnPush Change Detection
@Component ({
changeDetection : ChangeDetectionStrategy .OnPush ,
template : `<div>{{ count() }}</div>` ,
})
export class CounterComponent {
count = signal (0 );
}
@Component
template
`<div>{{ count }}</div>`
export
class
CounterComponent
0
Prefer Signals Over Mutable Properties
@Component ({
template : `
<h1>{{ title() }}</h1>
<p>Count: {{ count() }}</p>
` ,
})
export class DashboardComponent {
title = signal ("Dashboard" );
count = signal (0 );
}
@Component ({
template : `
<h1>{{ title }}</h1>
<p>Count: {{ count }}</p>
` ,
})
export class DashboardComponent {
title = "Dashboard" ;
count = 0 ;
}
Enable Zoneless for New Projects
bootstrapApplication (AppComponent , {
providers : [provideZonelessChangeDetection ()],
});
No zone.js patches on async APIs
Smaller bundle (~15KB savings)
Clean stack traces for debugging
Better micro-frontend compatibility
2. Async Operations & Waterfalls (CRITICAL)
Eliminate Sequential Data Fetching
this .route .params .subscribe ((params ) => {
this .userService .getUser (params.id ).subscribe ((user ) => {
this .postsService .getPosts (user.id ).subscribe ((posts ) => {
});
});
});
forkJoin ({
user : this .userService .getUser (id),
posts : this .postsService .getPosts (id),
}).subscribe ((data ) => {
});
this .route .params
.pipe (
map ((p ) => p.id ),
switchMap ((id ) => this .userService .getUser (id)),
)
.subscribe ();
Avoid Client-Side Waterfalls in SSR
export const route : Route = {
path : "profile/:id" ,
resolve : { data : profileResolver },
component : ProfileComponent ,
};
class ProfileComponent implements OnInit {
ngOnInit (this .http .get ("/api/profile" ).subscribe ();
}
}
3. Bundle Optimization (CRITICAL)
Lazy Load Routes
export const routes : Routes = [
{
path : "admin" ,
loadChildren : () =>
import ("./admin/admin.routes" ).then ((m ) => m.ADMIN_ROUTES ),
},
{
path : "dashboard" ,
loadComponent : () =>
import ("./dashboard/dashboard.component" ).then (
(m ) => m.DashboardComponent ,
),
},
];
import { AdminModule } from "./admin/admin.module" ;
export const routes : Routes = [
{ path : "admin" , component : AdminComponent },
];
Use @defer for Heavy Components
@defer (on viewport) {
<app-analytics-chart [data ]="data()" />
} @placeholder {
<div class ="chart-skeleton" > </div >
}
<app-analytics-chart [data ]="data()" />
Avoid Barrel File Re-exports
import { Button , Modal , Table } from "@shared/components" ;
import { Button } from "@shared/components/button/button.component" ;
import { Modal } from "@shared/components/modal/modal.component" ;
Dynamic Import Third-Party Libraries
async loadChart (const { Chart } = await import ('chart.js' );
this .chart = new Chart (this .canvas , config);
}
import { Chart } from 'chart.js' ;
4. Rendering Performance (HIGH)
Always Use trackBy with @for
@for (item of items(); track item.id) {
<app-item-card [item ]="item" />
}
@for (item of items(); track $index) {
<app-item-card [item ]="item" />
}
Use Virtual Scrolling for Large Lists import { CdkVirtualScrollViewport , CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling' ;
@Component ({
imports : [CdkVirtualScrollViewport , CdkFixedSizeVirtualScroll ],
template : `
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
<div *cdkVirtualFor="let item of items" class="item">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>
`
})
Prefer Pure Pipes Over Methods
@Pipe ({ name : 'filterActive' , standalone : true , pure : true })
export class FilterActivePipe implements PipeTransform {
transform (items : Item []): Item [] {
return items.filter (i =>active );
}
}
@for (item of items () | filterActive; track item.id ) { ... }
@for (item of getActiveItems (); track item.id ) { ... }
Use computed() for Derived Data
export class ProductStore {
products = signal<Product []>([]);
filter = signal ('' );
filteredProducts = computed (() => {
const f = this .filter ().toLowerCase ();
return this .products ().filter (p =>name .toLowerCase ().includes (f)
);
});
}
get filteredProducts () {
return this .products .filter (p =>name .toLowerCase ().includes (this .filter )
);
}
5. Server-Side Rendering (HIGH)
Configure Incremental Hydration
import {
provideClientHydration,
withIncrementalHydration,
} from "@angular/platform-browser" ;
export const appConfig : ApplicationConfig = {
providers : [
provideClientHydration (withIncrementalHydration (), withEventReplay ()),
],
};
Defer Non-Critical Content
<app-header />
<app-hero />
@defer (hydrate on viewport) {
<app-product-grid />
} @defer (hydrate on interaction) {
<app-chat-widget />
}
Use TransferState for SSR Data @Injectable ({ providedIn : "root" })
export class DataService {
private http = inject (HttpClient );
private transferState = inject (TransferState );
private platformId = inject (PLATFORM_ID );
getData (key : string ): Observable <Data > {
const stateKey = makeStateKey<Data >(key);
if (isPlatformBrowser (this .platformId )) {
const cached = this .transferState .get (stateKey, null );
if (cached) {
this .transferState .remove (stateKey);
return of (cached);
}
}
return this .http .get <Data >(`/api/${key} ` ).pipe (
tap ((data ) => {
if (isPlatformServer (this .platformId )) {
this .transferState .set (stateKey, data);
}
}),
);
}
}
6. Template Optimization (MEDIUM)
Use New Control Flow Syntax
@if (user()) {
<span > {{ user()!.name }}</span >
} @else {
<span > Guest</span >
} @for (item of items(); track item.id) {
<app-item [item ]="item" />
} @empty {
<p > No items</p >
}
<span *ngIf ="user; else guest" > {{ user.name }}</span >
<ng-template #guest > <span > Guest</span > </ng-template >
Avoid Complex Template Expressions
class Component {
items = signal<Item []>([]);
sortedItems = computed (() =>
[...this .items ()].sort ((a, b ) => a.name .localeCompare (b.name ))
);
}
@for (item of sortedItems (); track item.id ) { ... }
@for (item of items () | sort :'name' ; track item.id ) { ... }
7. State Management (MEDIUM)
Use Selectors to Prevent Re-renders
@Component ({
template : `<span>{{ userName() }}</span>` ,
})
class HeaderComponent {
private store = inject (Store );
userName = this .store .selectSignal (selectUserName);
}
@Component ({
template : `<span>{{ state().user.name }}</span>` ,
})
class HeaderComponent {
private store = inject (Store );
state = toSignal (this .store );
}
Colocate State with Features
@Injectable ()
export class ProductStore { ... }
@Component ({
providers : [ProductStore ],
})
export class ProductPageComponent {
store = inject (ProductStore );
}
@Injectable ({ providedIn : 'root' })
export class GlobalStore {
}
8. Memory Management (LOW-MEDIUM)
Use takeUntilDestroyed for Subscriptions import { takeUntilDestroyed } from '@angular/core/rxjs-interop' ;
@Component ({...})
export class DataComponent {
private destroyRef = inject (DestroyRef );
constructor (this .data$ .pipe (
takeUntilDestroyed (this .destroyRef )
).subscribe (data =>this .process (data));
}
}
export class DataComponent implements OnDestroy {
private subscription!: Subscription ;
ngOnInit (this .subscription = this .data$ .subscribe (...);
}
ngOnDestroy (this .subscription .unsubscribe ();
}
}
Prefer Signals Over Subscriptions
@Component ({
template : `<div>{{ data().name }}</div>` ,
})
export class Component {
data = toSignal (this .service .data$ , { initialValue : null });
}
@Component ({
template : `<div>{{ data?.name }}</div>` ,
})
export class Component implements OnInit , OnDestroy {
data : Data | null = null ;
private sub!: Subscription ;
ngOnInit (this .sub = this .service .data$ .subscribe ((d ) => (this .data = d));
}
ngOnDestroy (this .sub .unsubscribe ();
}
}
Quick Reference Checklist
New Component
Performance Review
SSR Check
Resources
When to Use This skill is applicable to execute the workflow or actions described in the overview.
Connections
Domain: [[Software Entwicklung]]Kategorie: [[Frontend Entwicklung]]Navigation: [[Skills Uebersicht]], [[Home]] 