Angular Starter Project With Tools 2024: Angular 17.0.10

Tools / packages included

Tool	Version
Angular	17.0.9
Angular CLI	17.0.10
Angular integrated vite / esbuild for `ng build` and `ng serve`	--
nvm	(v0.39)
NodeJs	20.11
npm	10.2
pnpm	8.14
jest	29.7
JavaScript	ECMA2022
TypeScript	5.2
Sass	--
RxJs	7.8

Material Design 3.0 support coming later in 2024...

SSR is now an option in Angular! SSR is not included in this starter project, but refer to section How this Repo was Created on how to enable SSR.

Angular compatibility Guides

Before updating NodeJS, you must make sure that Angular supports it.

Releases

Angular Releases

NodeJs Current Release

NodeJs Releases

pnpm Releases

nvm Releases

Installation

The installation must be run from a linux terminal, or in Windows you can use a git bash terminal.

Clone repo

git clone https://github.com/ron2015schmitt/angular-starter-project.git
cd angular-starter-project

Install `nvm`

If you do not already have nvm installed, execute the following to install nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Notes:

After the command executes close out your terminal and open a new terminal to ensure everything was installed correctly
You can check the nvm git repo to find the latest version number instead of 0.39.7.
To upgrade nvm, you use the same command as given above.

Check the verison of nvm

nvm -v

Package manager setup.

The project utilizes the pnpm package manager. However npm is needed to install pnpm.

cd angular-starter-project
nvm install 20.11
nvm use 20.11
npm i -g npm@10.2
npm i -g pnpm@8.14

Notes

You must execute the above nvm use command in every new terminal when using this project! However, if you forget, ng will issue a warning.
With nvm, using the global option -g is preferred because it only applies to the specific NodeJs version.
Yes, we use npm not pnpm in the above to install npm and pnpm:
- Always use npm for packages installed globally.
- Always use pnpm for project packages (ie local intsall).
The Angular version is installed locally in the project. You can install globally for this version of NodeJs using

npm i -g @angular/cli@VERSION

pnpm uses pnpm-lock.yaml instead of package-lock.json
If by mistake, you run npm to install the project or a project package, execute the following (with care) to fix:

rm package-lock.json
rm -fr node_modules/

Install packages

pnpm install

Your node_modules will now be populated with the project packages.

Serve the website

ng serve

point browser to http://localhost:4200/

http://localhost:4200/

Run jest

ng test

You should see something like

How this repo was created

Set up package managers: nvm, npm, pnpm

nvm install 20.10
nvm use 20.10
npm i -g npm@10.2
npm i -g pnpm@8.13

Note that with nvm, using -g is preferred because it only applies to the specific NodeJs version

Set up Angular

The current version of the global Angular CLI determines the version of Angular to be used, installed via npm (not pnpm) because we are not in a project yet.

npm i -g @angular/cli@17.0

Create Angular scaffolding

The following creates angular.json and the src directory for the sample app.

ng new angular-starter-project --minimal --skip-tests --skip-git --package-manager=pnpm
cd angular-starter-project

Answer questions when prompted:

Note that if you would like SSR, then answer yes above.

Add TypeScript

Starting in Angular 17.0, TypeScript is now included by default!

Set up integrated vite / esbuild

Starting in Angular 17.0, Vite / esbuild are now the default for new projects!

Change project version in `package.json`

In your project package.json, change project version to match Angular version

Add `bin` and `engines` sections to the `package.json`

Add the tool versions to package.json

  "bin": {
    "myng": "./node_modules/@angular/cli/bin/ng"
  },
  "engines": {
    "node": "20.10",
    "npm": "10.2",
    "pnpm": "8.13"
  },

Check the versions

ng version

Set up Jest

Install jest

pnpm add jest --save-dev
pnpm add @types/jest --save-dev
pnpm add jest-environment-jsdom --save-dev
pnpm --recursive update

Add the following "test" section inside the "architect" section of angular.json

        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.app.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }

as follows

Add "jest" to the compilerOptions.types array in your tsconfig.app.json

  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest"  <-- Add this 
    ]
  },

Upgrading minor versions