From 3c321b512fbdd50683d338651ac00fffd5121e0e Mon Sep 17 00:00:00 2001 From: Dimitri Loukine Date: Thu, 5 Jun 2025 14:07:49 +0200 Subject: [PATCH] docs(angular): use angular with esbuild --- angular/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/angular/README.md b/angular/README.md index e972c16..0011dda 100644 --- a/angular/README.md +++ b/angular/README.md @@ -10,6 +10,7 @@ This document contains a collection of best practices for developing Angular app 1. [Keep Up to Date](#keep-up-to-date) 1. [Strict Mode](#strict-mode) 1. [Use Angular CLI](#use-angular-cli) +1. [Use Angular with ESBuild](#use-angular-with-esbuild) 1. [Use State Management](#use-state-management) 1. [Use Environment Variables](#use-environment-variables) 1. [Divide Imports](#divide-imports) @@ -150,6 +151,17 @@ npm i -g @angular/cli ng version ``` +## Use Angular with ESBuild + +Modern angular applications are built into ESM modules through the `"builder": "@angular-devkit/build-angular:application"` or the `"builder": "@angular-devkit/build-angular:browser-esbuild"` configuration in `angular.json`. Legacy applications may still be using the older and less performant webpack builder, `"builder": "@angular-devkit/build-angular:browser"`. + +`@angular-devkit/build-angular:application` is the default builder when you initiate an new application, it allows for SSR/SSG builds aswell as SPA. +`@angular-devkit/build-angular:browser-esbuild` is the same with the SSR/SSG capability stripped down. + +On legacy apps, favor migrating to the new ESBuild architecture, there are straightforward benefits of doing so, such as faster build times, compile time static analysis and smaller bundle sizes through improved tree-shaking, including the ability to treeshake libraries. + +[More info on the migration process is available here](https://angular.dev/tools/cli/build-system-migration). + ## Use State Management One of the most challenging aspects of software development is **state management**. In Angular, state management helps manage state transitions by storing the state of various data. @@ -1173,6 +1185,8 @@ ng generate @angular/core:standalone export class StandaloneComponent {} ``` + + ## Use ng-template Using `ng-template` and `ngTemplateOutlet` is a powerful way to reuse code within the same component without creating additional components. This approach enhances code reusability, maintainability, and readability.