Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.
When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.
Once you finish generating code, run
ng build
to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.
Creating New Projects
If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:
Use the latest stable version of Angular unless the user specifies otherwise.
Use Signals Forms for form management in new projects (available in Angular v21 and newer)
Find out more
.
Execution Rules for
ng new
:
When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:
Step 1: Check for an explicit user version.
IF
the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use
npx
.
Command:
npx @angular/cli@ new
Step 2: Check for an existing Angular installation.
IF
no specific version is requested, run
ng version
in the terminal to check if the Angular CLI is already installed on the system.
IF
the command succeeds and returns an installed version, use the local/global installation directly.
Command:
ng new
Step 3: Fallback to Latest.
IF
no specific version is requested AND the
ng version
command fails (indicating no Angular installation exists), you must use
npx
to fetch the latest version.
Command:
npx @angular/cli@latest new
Components
When working with Angular components, consult the following references based on the task:
Fundamentals
Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read
components.md
Inputs
Signal-based inputs, transforms, and model inputs. Read
inputs.md
Outputs
Signal-based outputs and custom event best practices. Read
outputs.md
Host Elements
Host bindings and attribute injection. Read
host-elements.md
If you require deeper documentation not found in the references above, read the documentation at
https://angular.dev/guide/components
.
Reactivity and Data Management
When managing state and data reactivity, use Angular Signals and consult the following references:
Signals Overview
Core signal concepts (
signal
,
computed
), reactive contexts, and
untracked
. Read
signals-overview.md
Dependent State (
linkedSignal
)
Creating writable state linked to source signals. Read
linked-signal.md
Async Reactivity (
resource
)
Fetching asynchronous data directly into signal state. Read
resource.md
Side Effects (
effect
)
Logging, third-party DOM manipulation (
afterRenderEffect
), and when NOT to use effects. Read
effects.md
Forms
In most cases for new apps,
prefer signal forms
. When making a forms decision, analyze the project and consider the following guidelines:
if the application is using v21 or newer and this is a new form,
prefer signal forms
.
-For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.
Signal Forms
Use signals for form state management. Read
signal-forms.md
Template-driven forms
Use for simple forms. Read
template-driven-forms.md
Reactive forms
Use for complex forms. Read
reactive-forms.md
Dependency Injection
When implementing dependency injection in Angular, follow these guidelines:
Fundamentals
Overview of Dependency Injection, services, and the
inject()
function. Read
di-fundamentals.md
Creating and Using Services
Creating services, the
providedIn: 'root'
option, and injecting into components or other services. Read
creating-services.md
Defining Dependency Providers
Automatic vs manual provision,
InjectionToken
,
useClass
,
useValue
,
useFactory
, and scopes. Read
defining-providers.md
Injection Context
Where
inject()
is allowed,
runInInjectionContext
, and
assertInInjectionContext
. Read
injection-context.md
Hierarchical Injectors
The
EnvironmentInjector
vs
ElementInjector
, resolution rules, modifiers (
optional
,
skipSelf
), and
providers
vs
viewProviders
. Read
hierarchical-injectors.md
Angular Aria
When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:
Angular Aria Components
Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read
angular-aria.md
Routing
When implementing navigation in Angular, consult the following references:
Define Routes
URL paths, static vs dynamic segments, wildcards, and redirects. Read
define-routes.md
Route Loading Strategies
Eager vs lazy loading, and context-aware loading. Read
loading-strategies.md
Show Routes with Outlets
Using
, nested outlets, and named outlets. Read
show-routes-with-outlets.md
Navigate to Routes
Declarative navigation with
RouterLink
and programmatic navigation with
Router
. Read
navigate-to-routes.md
Control Route Access with Guards
Implementing
CanActivate
,
CanMatch
, and other guards for security. Read
route-guards.md
Data Resolvers
Pre-fetching data before route activation with
ResolveFn
. Read
data-resolvers.md
Router Lifecycle and Events
Chronological order of navigation events and debugging. Read
router-lifecycle.md
Rendering Strategies
CSR, SSG (Prerendering), and SSR with hydration. Read
rendering-strategies.md
Route Transition Animations
Enabling and customizing the View Transitions API. Read
route-animations.md
If you require deeper documentation or more context, visit the
official Angular Routing guide
.
Styling and Animations
When implementing styling and animations in Angular, consult the following references:
Using Tailwind CSS with Angular
Integrating Tailwind CSS into Angular projects. Read
tailwind-css.md
Angular Animations
Using native CSS (recommended) or the legacy DSL for dynamic effects. Read
angular-animations.md
Styling components
Best practices for component styles and encapsulation. Read
component-styling.md
Testing
When writing or updating tests, consult the following references based on the task:
Fundamentals
Best practices for unit testing (Vitest), async patterns, and
TestBed
. Read
testing-fundamentals.md
Component Harnesses
Standard patterns for robust component interaction. Read
component-harnesses.md
Router Testing
Using
RouterTestingHarness
for reliable navigation tests. Read
router-testing.md
End-to-End (E2E) Testing
Best practices for E2E tests with Cypress. Read
e2e-testing.md
Tooling
When working with Angular tooling, consult the following references: