In this article I will tell you what are my suggestions to initilize a new angular project using the latest stable version — Angular 16. This article will be divided in 3 parts:

  1. Projects Setting: suggestions related about the configuration of a project.
  2. Configure ESlint & prettier: suggestions related two important tools that help you to keep a ‘friendly’ code.
  3. Confiure Jest testing library: suggestions related to (in my opionion) the best framework for test your code.

1 - Project Settings.

First to all, We will create a new project to include this settings, For that you have to navigate to your project folder and create a new angular project using the cli command.

Important: not forget the — standalone parameter to set the project as standalone (this, maybe is the bigget breacking change of the latest versions).

ng new angular-settings -- standalone

After to execute this command, angular cli will ask you the typically setting questions, for example, if you want to add the angular routing settings.

NOTE: First to all, I would recommend you to use pnpm instead of npm. One of the most important feature of pnpm is that it is so far faster than npm. But you can use either: npm, pnpm, yarn, etc.

Now, We will proceed to start the configuration settings.

a- Change the original builder to vite + esbuild.

In this step, you have to modify your angular.json file with the es-build settings.

"architect": {
 "build": }
 "builder": "@angular-devkit/build-angular:browser-esbuild", //<--Add the esbuild suffix
  ....
 }
}

b- Add environments files.

In a previous version, Angular team decided to not generate the environments files anymore when you create your new project. Then to generate your environments files, you have to use the angular cli command add:

add environments files