angular-expert

Key Development Principles

1. Provide Concise Examples
   Share precise Angular and TypeScript examples with clear explanations.

2. Immutability & Pure Functions
   Apply immutability principles and pure functions wherever possible, especially within services and state management, to ensure predictable outcomes and simplified debugging.

3. Component Composition
   Favor component composition over inheritance to enhance modularity, enabling reusability and easy maintenance.

4. Meaningful Naming
   Use descriptive variable names like isUserLoggedIn, userPermissions, and fetchData() to communicate intent clearly.

5. File Naming
   Enforce kebab-case naming for files (e.g., user-profile.component.ts) and match Angular's conventions for file suffixes (e.g., .component.ts, .service.ts, etc.).

Angular and TypeScript Best Practices

• Type Safety with Interfaces
  Define data models using interfaces for explicit types and maintain strict typing to avoid any.

• Full Utilization of TypeScript
  Avoid using any; instead, use TypeScript's type system to define specific types and ensure code reliability and ease of refactoring.

• Organized Code Structure
  Structure files with imports at the top, followed by class definition, properties, methods, and ending with exports.

• Optional Chaining & Nullish Coalescing
  Leverage optional chaining (?.) and nullish coalescing (??) to prevent null/undefined errors elegantly.

• Standalone Components
  Use standalone components as appropriate, promoting code reusability without relying on Angular modules.

• Signals for Reactive State Management
  Utilize Angular's signals system for efficient and reactive programming, enhancing both state handling and rendering performance.

• Direct Service Injection with inject
  Use the inject function to inject services directly within component logic, directives, or services, reducing boilerplate code.

File Structure and Naming Conventions

• Component Files: *.component.ts
• Service Files: *.service.ts
• Module Files: *.module.ts
• Directive Files: *.directive.ts
• Pipe Files: *.pipe.ts
• Test Files: *.spec.ts
• General Naming: kebab-case for all filenames to maintain consistency and predictability.

Coding Standards

• Use single quotes (') for string literals.
• Use 2-space indentation.
• Avoid trailing whitespace and unused variables.
• Prefer const for constants and immutable variables.
• Utilize template literals for string interpolation and multi-line strings.

Angular-Specific Development Guidelines

• Use async pipe for observables in templates to simplify subscription management.
• Enable lazy loading for feature modules, optimizing initial load times.
• Ensure accessibility by using semantic HTML and relevant ARIA attributes.
• Use Angular's signals system for efficient reactive state management.
• For images, use NgOptimizedImage to improve loading and prevent broken links in case of failures.
• Implement deferrable views to delay rendering of non-essential components until they're needed.

Import Order

1. Angular core and common modules
2. RxJS modules
3. Angular-specific modules (e.g., FormsModule)
4. Core application imports
5. Shared module imports
6. Environment-specific imports (e.g., environment.ts)
7. Relative path imports

Error Handling and Validation

• Apply robust error handling in services and components, using custom error types or error factories as needed.
• Implement validation through Angular's form validation system or custom validators where applicable.

Testing and Code Quality

• Adhere to the Arrange-Act-Assert pattern for unit tests.
• Ensure high test coverage with well-defined unit tests for services, components, and utilities.

Performance Optimization

• Utilize trackBy functions with ngFor to optimize list rendering.
• Apply pure pipes for computationally heavy operations, ensuring that recalculations occur only when inputs change.
• Avoid direct DOM manipulation by relying on Angular's templating engine.
• Leverage Angular's signals system to reduce unnecessary re-renders and optimize state handling.
• Use NgOptimizedImage for faster, more efficient image loading.

Security Best Practices

• Prevent XSS by relying on Angular's built-in sanitization and avoiding innerHTML.
• Sanitize dynamic content using Angular's trusted sanitization methods to prevent vulnerabilities.

Core Principles

• Use Angular's dependency injection and inject function to streamline service injections.
• Focus on reusable, modular code that aligns with Angular's style guide and industry best practices.
• Continuously optimize for core Web Vitals, especially Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Reference
Refer to Angular's official documentation for components, services, and modules to ensure best practices and maintain code quality and maintainability.