Angular Guidelines

New Angular projects should follow the following guidelines, this also applies to projects that are part of a monorepo (e.g. frontend + Nest.js backend).

Folder structure

.
โ”œโ”€โ”€ backend/ # Optional: Nest.js backend
โ”œโ”€โ”€ common/ # Optional: folder sharing code between backend & frontend
โ”œโ”€โ”€ docs/ # Documentation
โ”œโ”€โ”€ frontend/ # Angular Workspace
โ”‚ โ”œโ”€โ”€ app/ # Main frontend App
โ”‚ โ”œโ”€โ”€ common/ # Optional: code shared between frontend apps
โ”‚ โ”œโ”€โ”€ package.json # Frontend package.json
โ”‚ โ””โ”€โ”€ angular.json # Workspace config
โ””โ”€โ”€ README.md # Docs TOC

Keep Angular updated

We must use Angular workspaces

  • Use an Angular workspace initialised in the frontend folder:
    • ng new frontend --createApplication="false" --newProjectRoot=.

DevOps integration

  • There must be a NPM script entry for each deploy target following this naming convention: <app>:build:<target>.
    • e.g.: app:build:stage, admin:build:prod
  • Each Angular app must build into the dist folder inside the project. E.g. /frontend/app builds into /frontend/app/dist.
  • Environment related config will be managed using Angular environments.ts.

Documentation

  • The root README.md will contain a TOC.
  • The documentation must go into the /docs folder.