angular-best-practices

Name: angular-best-practices
Author: SamarthaKV29

64stars12forks

How to install angular-best-practices?

samarthakv29/antigravity-god-mode/angular-best-practices

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular-best-practices

Installs into the current project.

Summary

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

Files · 1

View on GitHub

SKILL.md

1	# Angular Best Practices
2
3	Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
4
5	## When to Apply
6
7	Reference these guidelines when:
8
9	- Writing new Angular components or pages
10	- Implementing data fetching patterns
11	- Reviewing code for performance issues
12	- Refactoring existing Angular code
13	- Optimizing bundle size or load times
14	- Configuring SSR/hydration
15
16	---
17
18	## Rule Categories by Priority
19
20	\| Priority \| Category \| Impact \| Focus \|
21	\| -------- \| --------------------- \| ---------- \| ------------------------------- \|
22	\| 1 \| Change Detection \| CRITICAL \| Signals, OnPush, Zoneless \|
23	\| 2 \| Async Waterfalls \| CRITICAL \| RxJS patterns, SSR preloading \|
24	\| 3 \| Bundle Optimization \| CRITICAL \| Lazy loading, tree shaking \|
25	\| 4 \| Rendering Performance \| HIGH \| @defer, trackBy, virtualization \|
26	\| 5 \| Server-Side Rendering \| HIGH \| Hydration, prerendering \|
27	\| 6 \| Template Optimization \| MEDIUM \| Control flow, pipes \|
28	\| 7 \| State Management \| MEDIUM \| Signal patterns, selectors \|
29	\| 8 \| Memory Management \| LOW-MEDIUM \| Cleanup, subscriptions \|
30
31	---
32
33	## 1. Change Detection (CRITICAL)
34
35	### Use OnPush Change Detection
36
37	```typescript
38	// CORRECT - OnPush with Signals
39	@Component({
40	changeDetection: ChangeDetectionStrategy.OnPush,
41	template: `<div>{{ count() }}</div>`,
42	})
43	export class CounterComponent {
44	count = signal(0);
45	}
46
47	// WRONG - Default change detection
48	@Component({
49	template: `<div>{{ count }}</div>`, // Checked every cycle
50	})
51	export class CounterComponent {
52	count = 0;
53	}
54	```
55
56	### Prefer Signals Over Mutable Properties
57
58	```typescript
59	// CORRECT - Signals trigger precise updates
60	@Component({
61	template: `
62	<h1>{{ title() }}</h1>
63	<p>Count: {{ count() }}</p>
64	`,
65	})
66	export class DashboardComponent {
67	title = signal("Dashboard");
68	count = signal(0);
69	}
70
71	// WRONG - Mutable properties require zone.js checks
72	@Component({
73	template: `
74	<h1>{{ title }}</h1>
75	<p>Count: {{ count }}</p>
76	`,
77	})
78	export class DashboardComponent {
79	title = "Dashboard";
80	count = 0;
81	}
82	```
83
84	### Enable Zoneless for New Projects
85
86	```typescript
87	// main.ts - Zoneless Angular (v20+)
88	bootstrapApplication(AppComponent, {
89	providers: [provideZonelessChangeDetection()],
90	});
91	```
92
93	Benefits:
94
95	- No zone.js patches on async APIs
96	- Smaller bundle (~15KB savings)
97	- Clean stack traces for debugging
98	- Better micro-frontend compatibility
99
100	---
101
102	## 2. Async Operations & Waterfalls (CRITICAL)
103
104	### Eliminate Sequential Data Fetching
105
106	```typescript
107	// WRONG - Nested subscriptions create waterfalls
108	this.route.params.subscribe((params) => {
109	// 1. Wait for params
110	this.userService.getUser(params.id).subscribe((user) => {
111	// 2. Wait for user
112	this.postsService.getPosts(user.id).subscribe((posts) => {
113	// 3. Wait for posts
114	});
115	});
116	});
117
118	// CORRECT - Parallel execution with forkJoin
119	forkJoin({
120	user: this.userService.getUser(id),
121	posts: this.postsService.getPosts(id),
122	}).subscribe((data) => {
123	// Fetched in parallel
124	});
125
126	// CORRECT - Flatten dependent calls with switchMap
127	this.route.params
128	.pipe(
129	map((p) => p.id),
130	switchMap((id) => this.userService.getUser(id)),
131	)
132	.subscribe();
133	```
134
135	### Avoid Client-Side Waterfalls in SSR
136
137	```typescript
138	// CORRECT - Use resolvers or blocking hydration for critical data
139	export const route: Route = {
140	path: "profile/:id",
141	resolve: { data: profileResolver }, // Fetched on server before navigation
142	component: ProfileComponent,
143	};
144
145	// WRONG - Component fetches data on init
146	class ProfileComponent implements OnInit {
147	ngOnInit() {
148	// Starts ONLY after JS loads and component renders
149	this.http.get("/api/profile").subscribe();
150	}
151	}
152	```
153
154	---
155
156	## 3. Bundle Optimization (CRITICAL)
157
158	### Lazy Load Routes
159
160	```typescript
161	// CORRECT - Lazy load feature routes
162	export const routes: Routes = [
163	{
164	path: "admin",
165	loadChildren: () =>
166	import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
167	},
168	{
169	path: "dashboard",
170	loadComponent: () =>
171	import("./dashboard/dashboard.component").then(
172	(m) => m.DashboardComponent,
173	),
174	},
175	];
176
177	// WRONG - Eager loading everything
178	import { AdminModule } from "./admin/admin.module";
179	export const routes: Routes = [
180	{ path: "admin", component: AdminComponent }, // In main bundle
181	];
182	```
183
184	### Use @defer for Heavy Components
185
186	```html
187	<!-- CORRECT - Heavy component loads on demand -->
188	@defer (on viewport) {
189	<app-analytics-chart [data]="data()" />
190	} @placeholder {

People who liked this also viewed

6 picks

Type

angular-best-practices

64stars12forks

View on GitHub

How to install angular-best-practices?

samarthakv29/antigravity-god-mode/angular-best-practices

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular-best-practices

Installs into the current project.

Summary

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

Files · 1

View on GitHub

SKILL.md

1	# Angular Best Practices
2
3	Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
4
5	## When to Apply
6
7	Reference these guidelines when:
8
9	- Writing new Angular components or pages
10	- Implementing data fetching patterns
11	- Reviewing code for performance issues
12	- Refactoring existing Angular code
13	- Optimizing bundle size or load times
14	- Configuring SSR/hydration
15
16	---
17
18	## Rule Categories by Priority
19
20	\| Priority \| Category \| Impact \| Focus \|
21	\| -------- \| --------------------- \| ---------- \| ------------------------------- \|
22	\| 1 \| Change Detection \| CRITICAL \| Signals, OnPush, Zoneless \|
23	\| 2 \| Async Waterfalls \| CRITICAL \| RxJS patterns, SSR preloading \|
24	\| 3 \| Bundle Optimization \| CRITICAL \| Lazy loading, tree shaking \|
25	\| 4 \| Rendering Performance \| HIGH \| @defer, trackBy, virtualization \|
26	\| 5 \| Server-Side Rendering \| HIGH \| Hydration, prerendering \|
27	\| 6 \| Template Optimization \| MEDIUM \| Control flow, pipes \|
28	\| 7 \| State Management \| MEDIUM \| Signal patterns, selectors \|
29	\| 8 \| Memory Management \| LOW-MEDIUM \| Cleanup, subscriptions \|
30
31	---
32
33	## 1. Change Detection (CRITICAL)
34
35	### Use OnPush Change Detection
36
37	```typescript
38	// CORRECT - OnPush with Signals
39	@Component({
40	changeDetection: ChangeDetectionStrategy.OnPush,
41	template: `<div>{{ count() }}</div>`,
42	})
43	export class CounterComponent {
44	count = signal(0);
45	}
46
47	// WRONG - Default change detection
48	@Component({
49	template: `<div>{{ count }}</div>`, // Checked every cycle
50	})
51	export class CounterComponent {
52	count = 0;
53	}
54	```
55
56	### Prefer Signals Over Mutable Properties
57
58	```typescript
59	// CORRECT - Signals trigger precise updates
60	@Component({
61	template: `
62	<h1>{{ title() }}</h1>
63	<p>Count: {{ count() }}</p>
64	`,
65	})
66	export class DashboardComponent {
67	title = signal("Dashboard");
68	count = signal(0);
69	}
70
71	// WRONG - Mutable properties require zone.js checks
72	@Component({
73	template: `
74	<h1>{{ title }}</h1>
75	<p>Count: {{ count }}</p>
76	`,
77	})
78	export class DashboardComponent {
79	title = "Dashboard";
80	count = 0;
81	}
82	```
83
84	### Enable Zoneless for New Projects
85
86	```typescript
87	// main.ts - Zoneless Angular (v20+)
88	bootstrapApplication(AppComponent, {
89	providers: [provideZonelessChangeDetection()],
90	});
91	```
92
93	Benefits:
94
95	- No zone.js patches on async APIs
96	- Smaller bundle (~15KB savings)
97	- Clean stack traces for debugging
98	- Better micro-frontend compatibility
99
100	---
101
102	## 2. Async Operations & Waterfalls (CRITICAL)
103
104	### Eliminate Sequential Data Fetching
105
106	```typescript
107	// WRONG - Nested subscriptions create waterfalls
108	this.route.params.subscribe((params) => {
109	// 1. Wait for params
110	this.userService.getUser(params.id).subscribe((user) => {
111	// 2. Wait for user
112	this.postsService.getPosts(user.id).subscribe((posts) => {
113	// 3. Wait for posts
114	});
115	});
116	});
117
118	// CORRECT - Parallel execution with forkJoin
119	forkJoin({
120	user: this.userService.getUser(id),
121	posts: this.postsService.getPosts(id),
122	}).subscribe((data) => {
123	// Fetched in parallel
124	});
125
126	// CORRECT - Flatten dependent calls with switchMap
127	this.route.params
128	.pipe(
129	map((p) => p.id),
130	switchMap((id) => this.userService.getUser(id)),
131	)
132	.subscribe();
133	```
134
135	### Avoid Client-Side Waterfalls in SSR
136
137	```typescript
138	// CORRECT - Use resolvers or blocking hydration for critical data
139	export const route: Route = {
140	path: "profile/:id",
141	resolve: { data: profileResolver }, // Fetched on server before navigation
142	component: ProfileComponent,
143	};
144
145	// WRONG - Component fetches data on init
146	class ProfileComponent implements OnInit {
147	ngOnInit() {
148	// Starts ONLY after JS loads and component renders
149	this.http.get("/api/profile").subscribe();
150	}
151	}
152	```
153
154	---
155
156	## 3. Bundle Optimization (CRITICAL)
157
158	### Lazy Load Routes
159
160	```typescript
161	// CORRECT - Lazy load feature routes
162	export const routes: Routes = [
163	{
164	path: "admin",
165	loadChildren: () =>
166	import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
167	},
168	{
169	path: "dashboard",
170	loadComponent: () =>
171	import("./dashboard/dashboard.component").then(
172	(m) => m.DashboardComponent,
173	),
174	},
175	];
176
177	// WRONG - Eager loading everything
178	import { AdminModule } from "./admin/admin.module";
179	export const routes: Routes = [
180	{ path: "admin", component: AdminComponent }, // In main bundle
181	];
182	```
183
184	### Use @defer for Heavy Components
185
186	```html
187	<!-- CORRECT - Heavy component loads on demand -->
188	@defer (on viewport) {
189	<app-analytics-chart [data]="data()" />
190	} @placeholder {

People who liked this also viewed

6 picks

Type