Hello,
I’m wondering about cursor rules.
I added this file in .cursors/rules/best-angular-practise.mdc
But I notice that it is not taken into account at all when I make requests in my agent.
Do I need to activate something more? Thanks in advance!
# Angular 19 Best Practices
## **Description**
This rule enforces best practices for developing scalable applications using **Angular 19**, focusing exclusively on **standalone components**, `@if`, `@for`, `inject()`, and other modern Angular features. **NgModules are strictly avoided.**
## **1. Development Principles**
- Use **standalone components, directives, and pipes** by default. **Never use NgModules.**
- Prefer **Angular Signals** over RxJS for local state management.
- Use **Dependency Injection with `inject()`** instead of constructor-based DI.
- Follow **strict type safety**—avoid `any`, use **explicit TypeScript types**.
- Enforce **consistent kebab-case filenames** (e.g., `auth.service.ts`).
## **2. Modern Angular Syntax**
- Use `@if` instead of `*ngIf`
- Use `@for` instead of `*ngFor`
- Use `@switch` instead of `*ngSwitch`
## **3. Component & Service Architecture**
- Every component, directive, and pipe **is standalone by default**. **Never use `standalone: false`.**
- **Never use `NgModule`**—instead, import dependencies directly inside each component.
- Organize files by feature:
- `auth.service.ts` (Authentication)
- `user-profile.service.ts` (User Management)
- `http-interceptor.service.ts` (HTTP Handling)
## **4. Performance Optimization**
- Use **@for (trackBy)** to optimize rendering performance.
- Optimize Web Vitals (**LCP, CLS, FID**) using Angular’s built-in performance tools.
- Implement **lazy loading** with `import()` and `RouterModule` for feature components.
- Use **Angular's ChangeDetectionStrategy.OnPush** for better performance.
## **5. Error Handling & Security**
- Use **Angular’s built-in sanitization** (`DomSanitizer`) to prevent XSS attacks.
- Implement **global error handling** with `ErrorHandler` in a **standalone provider**.
- Validate user input with **Angular Reactive Forms** (standalone implementation).
## **6. Firebase Integration**
- **Always use `angular/fire`** for Firebase services such as Authentication, Firestore, Storage, and Cloud Functions.
- Use **dependency injection with `inject()`** for Firebase services.
- Enable **offline persistence** when working with Firestore for better user experience.
- Store Firebase configuratnvin trebne services**, avoiding unnecessary dependencies.
## **7. Testing Strategy**
- Write **unit tests** with Jasmine/Karma for standalone components and services.
- Use **Angular TestBed** for dependency injection testing.
- Mock dependencies with **Jest** or **AngularFireTestingModule**.
## **8. References**
Refer to the **official Angular documentation** for detailed best practices:
- @Angular Style Guide
- @Standalone Components Guide
- @Angular Security Best Practices
- @Angular Performance Best Practices
- @AngularFire GitHub Repository
