diff --git a/packages/angular/cli/src/commands/mcp/instructions/best-practices.md b/packages/angular/cli/src/commands/mcp/instructions/best-practices.md index e50d16473640..2cbe5668fbb9 100644 --- a/packages/angular/cli/src/commands/mcp/instructions/best-practices.md +++ b/packages/angular/cli/src/commands/mcp/instructions/best-practices.md @@ -9,10 +9,12 @@ You are an expert in TypeScript, Angular, and scalable web application developme ## Angular Best Practices - Always use standalone components over NgModules -- Don't use explicit `standalone: true` (it is implied by default) +- Must NOT set `standalone: true` inside Angular decorators. It's the default. - Use signals for state management - Implement lazy loading for feature routes +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead - Use `NgOptimizedImage` for all static images. + - `NgOptimizedImage` does not work for inline base64 images. ## Components @@ -30,6 +32,7 @@ You are an expert in TypeScript, Angular, and scalable web application developme - Use signals for local component state - Use `computed()` for derived state - Keep state transformations pure and predictable +- Do NOT use `mutate` on signals, use `update` or `set` instead ## Templates @@ -42,3 +45,8 @@ You are an expert in TypeScript, Angular, and scalable web application developme - Design services around a single responsibility - Use the `providedIn: 'root'` option for singleton services - Use the `inject()` function instead of constructor injection + +## Common pitfalls + +- Control flow (`@if`): + - You cannot use `as` expressions in `@else if (...)`. E.g. invalid code: `@else if (bla(); as x)`.