Full recommendations for an initial project settings — Angular 16.

7 min readSep 26, 2023

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 - Project settings.

2 - Configure Eslint & prettier.

3- Configure Jest testing library.

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

This command will generate two empty files, environment.ts and environment.development.ts. Also, you can generate more of them (for example, to be used on a staging environment).

The next step is to add the next code to indicate the environment settings accoording to each enviroment — dev, qa, staging, prod, etc (in the example, I will use the environment.development.ts file).

export const environment = {
  name: 'LOCAL',
  production: false,
  APIEndpoint: 'https://your.dev.api.domain.com',
  APIVersion: '/internal',
};

c- Configure path alias (shortcuts).

Path alias are shortcuts for the project’s files. They can use to reduce your import refences(‘convert’ them into more readables files).

"paths":{  
   "@src/*":[  
      "src/*"
   ],
   "@assets/*":[  
      "src/assets/*"
   ],
   "@shared/*":[  
      "src/app/shared/*"
   ]
}

d- Barrels.

A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.

To create a barrel, you just have to create a new file (per component) called ‘index.ts’ and add the component’s references inside:

export * from './component-example.ts'

Remember: if your project is divided by functionalities like the next example, you have to add a barrel per level and a barrel that wrap all functionalities.

In this case, component-one will have:

export * from './component-one.component';

And component-two will have another line:

export * from './component-two.component';

Finally, We need to add a global barrel per component, and put the references to the previous ones:

* export * from './component-one';
* export * from './component-two';

2— Configure Eslint & prettier.

Eslint & prettier are the most usefull tools that you need to your project. ESLint statically analyzes your code to quickly find problems. Prettier enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Now. I will to proceed to explain how to install and configure each ones.

a- Install libraries.

In this step, We will install the both libraries.

ng add @angular-eslint/schematics

After to execute the command, the console will show us the next message (We have to accept this installation).

As you see, this schematics had updated the angular.json and package.json files, aslo .eslintrc.json file have been created (this file contains the rules for our eslint).

After this installation, We need to install prettier and prettier-eslint dependencies (these dependencies should be installed only for development).

pnpm i prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier -D

Note: -D: this command means that is a development dependency (It should appear on devDepencies section).

b- Create .eslintrc.json file.

After the previous process finishes, you have to create an .eslintrc.json file, this file should be placed in the root directory of your project with the following contents:

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "import",
    "jsdoc",
    "prefer-arrow",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "caughtErrorsIgnorePattern": "^_"
      }
    ]
  }
}

c- Create .prettierrc file.

Then, Once the previous process is completed, you have to create a file called .prettierrc — this file will contains some prettier rules. After to create the file, proceed to fill up with the next code:

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "bracketSameLine": true,
  "printWidth": 80
}

d- Create .prettierignore file.

Next, We have to create the file where We indicate what files will be ignored. For that, We need to create a file called .prettierignore and We have to fill up with the next code:

package.json
package-lock.json
**/.git
**/.svn
**/.hg
**/node_modules
.angular
.vscode
.cz-config.js
.eslintrc.json
.prettierrc.json
.stylelintrc.json
angular.json
commitlint.config.js
documentation.json
tsconfig.json
coverage
dist

e- Install extensions.

Now, We will install the next 2 extensions, ESLint and Prettier. We are going to use these extensions to correctly manage the previously made configurations.

f- Add lint — fix command.

To finish this section, We can configure a script to be executed when I want to use lint -and it fixes all the issues. For that, We have to add fix Lint and prettier errors command in our package.json:

"lint": "ng lint", // this commands already exist.
"lint:fix": "ng lint --fix"

3 — Configure Jest testing library.

a- Remove all karma & jasmine packages.

You can use the next command to remove the mentioned libraries. Also, if you have anu other karma or jasmine library, you can remove them using the same command.

pnpm remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine-html-reporter karma-jasmine

NOTE: now, you can check that all karma & jasmine refereces are removed (devDepencies ).

b- Install Jest.

Now, let’s proceed to install jest:

pnpm install -D @types/jest ts-jest jest-preset-angular jest

c- Create setup-jest.ts file.

Create setup-jest.js file on the project’s root and add the next line
import ‘jest-preset-angular/setup-jest’;

d- Add the next lines to package.json file.

Below your devDepencies section, add the next lines:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "globalSetup": "jest-preset-angular/global-setup"
  }

Your package.json should have the next configuration:

e- Configure Jest on tsconfig.json and tsconfig.spec.json.

Add the next lines to tsconfig.json:

    "lib": ["ES2022", "dom"],
    "types": ["jest"],

And add the next lines to tsconfig.spec.json.

"types": ["jest", "node"]

f- Configure Jest commands.

Open again your package.json file and add the next lines:

"test": "jest",
"test:watch": "jest --watchAll",
"test:coverage": "jest --coverage",

As a example, this should be the result of that configuration:

g- Remove karma.config.js anf test.ts file (optional Step).

Finally, and as an optional step, We proceed to remove all the extra files with karma’s references.

h- Running test.

For run test, you can use the command npm run test:watch to run your test, or you can use npm run test:coverage to vizualize the project’s coverage.

NOTE: If after to execute any of the commands mentioned before, you see a message like to the next one: