Angular : Best practices after the renaissance

Starting with version 16, Angular introduced significant changes aimed at enhancing the developer experience (DX). These updates streamline the development process, making it easier and faster to write clean, efficient code with fewer steps. The improvements focus on reducing boilerplate, simplifying component management, and offering more flexibility, all of which allow developers to focus on building features rather than dealing with unnecessary complexity. With these changes, Angular continues to evolve, ensuring that both beginners and experienced developers can build modern web applications more efficiently.

Lazy Loading

Lazy loading has a significant impact on application performance by allowing you to load code only when it’s needed, rather than loading everything upfront. This prevents unnecessary JavaScript from being bundled and downloaded, which can slow down the initial load time, especially for large applications. By deferring the loading of code that runs under specific conditions, lazy loading optimizes resource use and improves the overall user experience.

In Angular, when defining routes, we associate pages with specific paths. With lazy loading, we can instruct the compiler not to load certain components or modules until their corresponding route is visited, reducing the initial bundle size and speeding up application startup.

If you want to migrate to the new syntax, you can follow these steps here

Dependency Injection

In this section, I want to emphasize the importance of using the utility function inject() for service or component injection, rather than relying on the traditional constructor-based approach. The inject() function is more flexible and allows for cleaner, more readable code. It simplifies testing, supports better dependency management, and aligns with Angular's ongoing improvements to enhance the developer experience. By adopting inject(), you can take advantage of a more modern and efficient way to handle dependency injection in Angular applications.

If you’re still using constructor-based injection and want to migrate to the new syntax, you can follow these steps here

Standalone

Using standalone components gives you more control over your components compared to the traditional NgModules approach. It allows you to import components directly into each other without the need to go through modules. Standalone components help reduce the number of modules in your project, which translates to less code to manage.

If you are still using NgModules and wants to migrate to standalone components, you can follow these steps here

Control flow (from version ≥ 17)

One of the biggest improvements in Angular is the introduction of new syntax for handling HTML. The updated syntax for managing conditions and iterations significantly enhances code clarity and maintainability. Previously, directives like *ngIf and *ngFor were used, but the new syntax offers more streamlined and cleaner ways to handle such scenarios.

If you are still using *ngIf or *ngFor and want to transition to the new syntax, you can follow these steps here.

Self closing tag

To improve code visibility in your editor, consider formatting components with better syntax using self-closing tags. This technique helps in creating cleaner and more readable code. Here’s an example of using self-closing tags:

Self-closing tags are useful when a component does not require child elements. This approach enhances code clarity, making it easier to manage and read, especially in larger projects.

PS: There is no schematic migration script to help you convert your components to this approach (the pull request is still in draft on GitHub, Thanks to Enea Jahollari). However, if you are using ESLint in your project, you can activate this rule from @angular-eslint

{
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
      "rules": {
        "@angular-eslint/template/prefer-control-flow": "error",
        "@angular-eslint/template/prefer-self-closing-tags": "error",
        "@angular-eslint/template/use-track-by-function": "error"
      }
},

Conclusion

These practices are crucial for adapting your project to future changes in Angular. If you want to learn more, don’t forget to hit follow for more Angular insights.