Here is my project for new angular project, with selection and configuration of tools to ensure a good quality of code, like linter, formatter, unit tests or e2e tests.
Indeed @angular/cli doesn't impose linter or e2e test anymore.
And doesn't seem to want to use var jest for unit testing. 🤷
I include @angular/material with theming by CSS variables and ngrx, because I use them in most of my projects.
npm start
npm run format
npm run lint
You can run only specific lint/formatter if you want:
# For TS and HTML template (AKA ng lint)
npm run format:ng
npm run lint:ng
# For SCSS, JS and JSON
npm run lint:prettier
npm run format:prettier
# For SCSS
npm run format:stylelint
npm run lint:stylelint
npm run test
npm run e2e -- -c headless
npm run build
🅰️ Core:- @angular
- @angular/cli
- root scss move to dedicated folder
src/scss
(stylePreprocessorOptions
) - remove
.vscode
folder because it has to remain IDE agnostic - basics TS alias
- root scss move to dedicated folder
- @angular/material
- theming with CSS variables
- dedicated variables file
- NO global
MaterialModule
which import all the lib (tree-shaking ...) ! - light/dark theme auto switch with
prefers-color-scheme
(no class)
- ngrx
- store
- effects
- router-store with config
- store-devtools with config
- 👮 Linter/Formatter
- @angular-eslint + prettier for TS and HTML Template
- eslint, @typescript-eslint, @angular-eslint recommended rules
- rxjs plugin with recommended rules
- ngrx plugin with recommended rules
- import with import/order to auto sort imports (TS alias support and three groups)
- unused-imports to detect and auto-clear unused imports
- cypress plugin with recommended rules
- stylelint + prettier for SCSS
- standard-scss
- rational-order with empty-line-between-groups
- prettier for SCSS, JS and JSON
- @angular-eslint + prettier for TS and HTML Template
- ✔ Unit Test
- jest with @briebug/jest-schematic
- all config put in
src/tests
folder - prepare
src/tests/mocks
to put tests mocks - setup coverage threshold to 100 because I am a crazy person
jest-createspyobj for missing typed createspyobjNeed to find better typingjest-marbles for rxjs testing- jasmine-marble for rxjs testing (do not trust the name, is not related to jasmine (no dependence))
- ng-mocks for greatly simplify component testing
- all config put in
- jest with @briebug/jest-schematic
- 🐵 E2E Test
- cypress
- disable
video
andscreenshotOnRunFailure
- I keep only the
npm run e2e
command (with configs)
CI/CD must guarantee the quality of the code without being burdensome for the developers (so it must be fast).
And it must deploy (here, in GH Pages) the application automatically.
Job | Description |
---|---|
🚧 Install | Installation of dependencies and creation/update of cache. |
👮 Lint | Syntax verification of the code |
✔ Unit tests | Units tests |
🐵 E2E tests | E2E tests |
🛠️ Build | Build Angular application in prod config |
🚀 Deploy | Deployment on Github Pages |