angular

Angular Best Practices

This guide outlines the definitive best practices for Angular development, ensuring consistency, maintainability, and optimal performance. Adhere to these rules strictly.

1. Code Organization and Structure

1.1 One Concept Per File (SRP)

Rule: Each file must contain a single Angular concept (e.g., one component, one directive, one pipe, one service, one interface).

Explanation: This enforces the Single Responsibility Principle (SRP), improving modularity, readability, and testability. Exceptions are rare and only for tightly coupled, non-exported elements.

❌ BAD:

// user.model-and-service.ts
export interface User { id: string; name: string; }

@Injectable({ providedIn: 'root' })
export class UserService {
  // ... fetches users
}

✅ GOOD:

// user.model.ts
export interface User { id: string; name: string; }

// user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  // ... fetches users
}

1.2 Consistent Naming Conventions

Rule: Follow kebab-case for file names (feature-name.type.ts) and PascalCase for class names. Use standard type suffixes.

Explanation: Consistent naming makes files easy to locate and understand at a glance.

❌ BAD:

// MyUserList.component.ts
export class UserListComp { /* ... */ }

// authservice.ts
export class AuthenticationService { /* ... */ }

✅ GOOD:

// user-list.component.ts
export class UserListComponent { /* ... */ }

// auth.service.ts
export class AuthService { /* ... */ }

2. Component Architecture

2.1 Standalone Components by Default

Rule: Always create standalone components, directives, and pipes. Avoid NgModules for new features unless strictly necessary for legacy integration or specific library patterns.

Explanation: Standalone components simplify the Angular mental model, reduce boilerplate, and improve tree-shaking.

❌ BAD:

// app.module.ts
@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  // ...
})
export class AppModule { }

// my.component.ts
@Component({
  selector: 'app-my',
  template: `<p>My Component</p>`,
  styleUrls: ['./my.component.css'],
})
export class MyComponent { }