Ng16SignalMilestoneRelease

This project was generated with Angular CLI version 16.0.0.

Development server

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

Code scaffolding

Build

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

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Cloning Guide

Clone only the remote primary HEAD (default: origin/master)

git clone <url> --single-branch

Only specific branch

git clone <url> --branch <branch> --single-branch [<folder>]

git clone <url> --branch <branch>

Cloning repositories using degit
- master branch is default.

npx degit github:user/repo#branch-name <folder-name>

Cloning this project with skeleton

git clone https://github.com/actionanand/ng16-signal-milestone-release.git --branch 1-skeleton-ngv16 angular-proj-name

npx degit github:actionanand/ng16-signal-milestone-release#1-skeleton-ngv16 angular-proj-name

Automate using `Prettier`, `Es Lint` and `Husky`

Install the compatible node version

  nvm install v16.20.0

Install and Configure Prettier

Install prettier as below:

  yarn add prettier -D

Create a .prettierrc file and write down the format as below: - online ref

trailingComma: 'all'
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
bracketSpacing: true
bracketSameLine: true
arrowParens: 'avoid'
printWidth: 120
overrides:
  - files:
      - '*.js'
      - '*.jsx'
    options:
      bracketSpacing: true
      jsxSingleQuote: true
      semi: true
      singleQuote: true
      tabWidth: 2
      useTabs: false
  - files:
      - '*.ts'
    options:
      tabWidth: 2

Create a .prettierignore file and write as below(sample)

# Ignore artifacts:
build
coverage
e2e
node_modules
dist
dest
reports

# Ignore files
*.lock
package-lock.json
yarn.lock

Install Es Lint, if not installed

ng add @angular-eslint/schematics

Configure pre-commit hooks

Pre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. husky can be used to easily configure git hooks to prevent bad commits. We will use this along with pretty-quick to run Prettier on our changed files. Install these packages, along with npm-run-all, which will make it easier for us to run npm scripts:

yarn add husky pretty-quick npm-run-all -D

To configure the pre-commit hook, simply add a precommit npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, run-s to run scripts in sequence, and run-p to run scripts in parallel:

  "precommit": "run-s format:fix lint",
  "format:fix": "pretty-quick --staged",
  "format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
  "format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
  "lint": "ng lint",

Initialize husky

Run it once

  npm pkg set scripts.prepare="husky install"
  npm run prepare

Add a hook

  npx husky add .husky/pre-commit "yarn run precommit"
  npx husky add .husky/pre-commit "yarn test"
  git add .husky/pre-commit

Make a commit

  git commit -m "Keep calm and commit"
  # `yarn run precommit and yarn test` will run every time you commit

How to skip prettier format only in particular file

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

// prettier-ignore
matrix(
    1, 0, 0,
    0, 1, 0,
    0, 0, 1
  )

<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div (mousedown)="       onStart    (    )         " (mouseup)="         onEnd      (    )         "></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div (mousedown)="onStart()" (mouseup)="         onEnd      (    )         "></div>

/* prettier-ignore */
.my    ugly rule
  {

  }

Markdown

  <!-- prettier-ignore -->

Do not format this

YAML

# prettier-ignore
key  : value
  hello: world

For more, please check

Resources

Further help

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

Angular compatibility list

  npx ngvm compat

actionanand/ng16-signal-milestone-release