DOCSEARCHbyAlgolia
Submit Docs

ngtips Angular Best Practices

website·Indexed 31 days ago

https://ngtips.com

A comprehensive guide to best practices and recommendations for Angular development, covering versions 21 and 22. The documentation provides guidelines on performance, state management, dependency injection, reactivity with Signals, routing, authentication, API design, and styling, as well as advice on upgrading and project folder structure.

Tokens
65.3K
Snippets
311
Records
489
Agent score
57%

What's inside ngtips

  1. Implement a Core, Features, and Shared project architecture

    Split the codebase into three primary directories under src/app to ensure a clear separation of concerns:

    1. core: Contains global, non-business features and singletons (e.g., authentication services, interceptors, layout components). Avoid importing from the features folder into core.
    2. features: Contains business logic grouped by domain. Colocate all files related to a specific feature (components, stores, services) in the same folder. For domains with multiple routes, use a dedicated <feature>.routes.ts file.
    3. shared: Contains reusable components, directives, pipes, and models. While features are grouped by domain, shared items can be grouped by technical type (e.g., shared/components/). Avoid importing from core or features into shared.
    <project root>
├── src
│   ├── app
│   │   ├── core
│   │   │   ├── authentication
│   │   │   │   └── authentication.service.ts
│   │   │   ├── layout
│   │   │   │   └── nav-bar
│   │   │   │       └── nav-bar.component.ts
│   │   │   └── interceptors
│   │   │       └── error-handler.interceptor.ts
│   │   ├── features
│   │   │   ├── blog
│   │   │   │   ├── feed
│   │   │   │   │   └── blog-feed.component.ts
│   │   │   │   ├── post
│   │   │   │   │   └── blog-post.component.ts
│   │   │   │   └── blog.routes.ts
│   │   │   └── dashboard
│   │   │       └── dashboard.component.ts
│   │   └── shared
│   │       ├── components
│   │   │   │   └── form
│   │   │   │       └── color-picker
│   │   │       └── confirm-dialog
│   │   │       └── ...
│   │   │   ├── directives
│   │   │   ├── models
│   │   │   └── pipes

  2. Determine Angular Tips version compatibility

    Angular Tips v21 is designed for developers using the latest minor version of Angular v21. The documentation follows the same major versioning scheme as the Angular framework (starting from v19). If you are using an older version of Angular, it is recommended to use Angular Tips v19, though you should verify specific feature availability via the official Angular changelog and API reference.

  3. Plan for upcoming Angular features and AI integration

    Angular is planning several high-impact features for future versions, including deeper Signal integration into core modules like the Router and HTTP, the introduction of 'Selectorless' components and directives (allowing usage by name instead of CSS selectors), and the integration of AI to improve developer productivity.

  4. Determine Angular version compatibility for Angular Tips

    Angular Tips v22 is designed for developers using the latest minor version of Angular v22. The documentation follows the same major versioning as the Angular framework starting from v19. If you are using an older version of Angular, it is recommended to refer to Angular Tips v19, though you should verify specific feature availability via the official Angular changelog, update guide, and API reference.

  5. Understand Angular Tips v20 versioning and compatibility

    Angular Tips v20 is designed for developers using the latest minor version of Angular v20. The documentation follows the same major versioning as the Angular framework starting from v19. For developers using older versions of Angular, it is recommended to refer to Angular Tips v19, while cross-referencing the official Angular changelog, update guide, and API reference for version-specific feature availability.

  6. Understand Angular Tips documentation goals and target audience

    Angular Tips is designed for developers building complex, large-scope industry web applications intended for long-term maintenance by multiple people. It focuses on sharing best practices and expert recommendations to avoid common pitfalls in the Angular framework. It may not be suitable for simple web applications with a small scope.

  7. Choose between UI component libraries and Headless UI for Angular

    Angular UI libraries are categorized into two types based on the level of styling and control they provide:

    1. UI Component Libraries: Provide ready-to-use, pre-styled components. They offer fast development and consistent look-and-feel but have limited flexibility for custom designs.
    2. Headless UI Libraries: Provide functional logic, state management, and accessibility primitives without styling or markup. They offer maximum visual flexibility for custom design systems but require more effort to implement and style.

  8. Implement incremental hydration for SSR pages

    Incremental hydration allows server-rendered components to be progressively hydrated on the client side. Components remain non-interactive (dehydrated) until a trigger occurs. This is specifically for components that are immediately visible but not essential for the initial user experience.

    Constraint: Incremental hydration only works for server-side rendered (SSR) pages and only occurs during the initial page load.

    @defer (hydrate on viewport) {
  <app-user-details/>
} @placeholder {
  <p>Placeholder</p>
}

  9. Implement API specifications using the OpenAPI standard

    Define a language-agnostic API specification using the OpenAPI standard to describe paths, input parameters, and output formats. It is recommended to write the specification file manually rather than generating it from source code. This 'API-first' approach allows consumers to begin development simultaneously with the implementation and encourages better API design focused on business logic.

  10. Use routerLink for accessible navigation

    Prefer using the routerLink directive over programmatic navigation via router.navigate() or router.navigateByUrl(). routerLink renders standard HTML <a> tags, which improves accessibility and supports native browser behaviors like opening links in new tabs. Use the Router service only when programmatic navigation is strictly required (e.g., redirects).
    <!-- Recommended: Use routerLink -->
<a routerLink="/users">See employees</a>
<a [routerLink]="['/users', user.id]">See manager</a>

  11. Choose between CSR, SSG, and SSR rendering modes

    Angular supports three primary rendering modes depending on the content type and performance requirements:

    1. Client-Side Rendering (CSR): Rendering is done entirely in the browser via JavaScript. The server sends a minimal HTML file and JS bundles. Use this for simplicity and when SEO is not a priority (e.g., private applications).
    2. Static Site Generation (SSG): HTML pages are generated at build time. Use this for static content that does not require dynamic data or user-specific content to achieve the fastest load times.
    3. Server-Side Rendering (SSR): HTML is generated on the server per request. Use this for dynamic content to improve initial load performance and SEO. Only the first page is server-rendered; subsequent navigation is client-side.

  12. Apply TypeScript naming conventions for types and variables

    Follow these naming standards to ensure consistency across the codebase:

    • PascalCase: Use for enums, classes, types, and interfaces. Avoid adding type indicators like I (e.g., IUser) or Enum (e.g., UserStatusEnum) to the name.
    • camelCase: Use for variables and method names.
    • Iterables: Use plural forms for arrays, sets, and other collections (e.g., users instead of userList).
    • Avoid Abbreviations: Use whole words (e.g., userCount instead of usrCnt).
    • Clarity: Avoid ambiguous names like id; use specific identifiers like userId or companyId to reflect ownership.
    // ✅ Good
class UserProfile {}
interface User {}
enum UserStatus {}
const userCount = 10;
const users = getUsers();
const userId: number = 123;