Skip to content

docs(angular): use angular with esbuild #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dimitriloukine wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(angular): use angular with esbuild #44

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions angular/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down