This project was generated with Angular CLI version 16.1.4.

• Example Angular App
  • Table of Contents
  • Updating Angular
    • Example
  • Generated by @angular/cli
    • Development server
    • Code scaffolding
    • Build
    • Running unit tests
    • Running end-to-end tests
    • Further help
  • Setup
    • Angular App Creation
    • Adding @angular-eslint/schematics
    • Adding husky
    • Prettier
    • Setting up lint-staged
    • Add cypress
    • eslint-plugin-import Setup
    • Setting up @typescript-eslint rules requiring type information
    • Setup Karma Headless

To update Angular, run the following command replacing VERSION with the version you want to update to:

npm run ng -- update @angular/core@latest @angular/cli@latest @angular/material@latest @angular-eslint/schematics@latest @angular-devkit/core@latest

npm run ng -- update @angular/core@18 @angular/cli@18 @angular/material@18 @angular-eslint/schematics@18 @angular-devkit/core@18

Run npm run start for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Run npm run ng -- g component component-name to generate a new component. You can also use npm run ng -- g directive|pipe|service|class|guard|interface|enum|module.

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Run npm run test to execute the unit tests via Karma.

Run npm run test:cypress to execute the end-to-end tests via cypress headless. If you want to test using the interactive cypress app, run npm run test:cypress:open.

Both commands leverage start-server-and-test to run the app and tests in a single terminal.

To get more help on the Angular CLI use npm run ng -- help or go check out the Angular CLI Overview and Command Reference page.

ng new example-angular-app --routing=true --style=scss --package-manager=npm

ng add @angular-eslint/schematics

npx husky-init && npm install
chmod +x .husky/pre-commit

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Create a .prettierrc file. Example:

{
  "singleQuote": true,
  "printWidth": 125,
  "tabWidth": 2,
  "trailingComma": "all",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    },
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

Update the .eslintrc.json to include "plugin:prettier/recommended" in the extends array for .ts and .html files.

Next, add some prettier scripts to the package.json:

{
  "scripts": {
    "prettier": "prettier --config .prettierrc --write \"**/*.{css,html,js,jsx,json,md,scss,ts,tsx}\"",
    "prettier:test": "prettier --config .prettierrc --list-different \"**/*.{css,html,js,jsx,json,md,scss,ts,tsx}\""
  }
}

@angular-eslint documentation for prettier setup

npm install --save-dev lint-staged ng-lint-staged

Create a .lintstagedrc.json file in the root of the project. Example:

{
  "*.{css,html,js,jsx,json,md,ts,tsx,scss}": ["prettier --write"],
  "cypress/**/*.{html,js,jsx,ts,tsx}": ["prettier --write", "ng-lint-staged lint --fix --"],
  "src/**/*.{html,js,jsx,ts,tsx}": ["prettier --write", "ng-lint-staged lint --fix --"]
}

Change the husky pre-commit to be npx lint-staged

npm i -D cypress start-server-and-test eslint-plugin-cypress

Add the following to your package.json scripts:

{
  "scripts": {
    ...,
    "cypress:open": "cypress open",
    "cypress:headless": "cypress run --headless -b chrome --config video=false",
    ...,
    "test:cypress": "start-server-and-test start http://localhost:4200 cypress:headless",
    ...
  }
}

Then, run npm run cypress:open to open the cypress app and setup the configuration from there.

cypress overrides the global jest definitions making our existing angular jasmine tests have false-positive linting errors. To fix this we need to do some additional cypress config.

Source

First, create a tsconfig.json file inside the cypress folder that looks like this:

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts", "../cypress.d.ts", "../cypress.config.ts"],
  "exclude": []
}

Then, add a .eslintrc.json to the cypress folder that looks like this:

{
  "extends": ["plugin:cypress/recommended"]
}

Then, we need to add cypress to the lint config in angular.json:

{
  "lint": {
    "builder": "@angular-eslint/builder:lint",
    "options": {
      "lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "cypress"]
    }
  }
}

Then, in the base tsconfig.json we need to exclude cypress like below:

{
  "exclude": ["cypress.config.ts", "cypress"]
}

npm i -D eslint-plugin-import eslint-import-resolver-typescript

Add new section to .eslintrc.json called settings that looks like this:

{
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": ["tsconfig.app.json", "tsconfig.spec.json", "tsconfig.json", "cypress/tsconfig.json"]
      }
    }
  }
}

Then add two new plugins to the .ts extends array:

{
  "extends": ["plugin:import/recommended", "plugin:import/typescript"]
}

Source documentation

Add parserOptions to the .ts override:

{
  "parserOptions": {
    "project": ["tsconfig.app.json", "tsconfig.spec.json", "tsconfig.json", "cypress/tsconfig.json"]
  }
}

To automatically add parserOptions to newly created applications or libraries within this workspace, simply update the angular.json schematics with the following:

{
  "@angular-eslint/schematics:application": {
    "setParserOptionsProject": true
  },
  "@angular-eslint/schematics:library": {
    "setParserOptionsProject": true
  }
}

Then, add "plugin:@typescript-eslint/recommended-requiring-type-checking", and "plugin:@typescript-eslint/strict", to the .ts extends array underneath "plugin:@typescript-eslint/recommended", inside of .eslintrc.json:

{
  "extends": [
    ...,
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:@typescript-eslint/strict",
    ...
  ]
}

TBD if we need to generate a karma.conf.js file or not. Angular 16 automatically generates this file for us in memory based on the configuration of "test" in angular.json. View the documentation here.

Add "codeCoverage": true to the "test" "options" in angular.json. Then, add a new script to package.json: "test:ci": "npm run test -- --no-watch --no-progress --browsers=ChromeHeadless",.