rainerhahnekamp/angular-starter

A starter project for a modern Angular application

Angular Project Setup

Installation

pnpm create @angular@latest -s -t -S --experimental-zoneless --ssr false --style scss [yourProjectName]

Manually add the following props to the angular.json. The path is projects.[yourProjectName].schematics.@schematics/angular:component

• "changeDetection": "OnPush"
• "flat": true

UI

pnpm ng add @angular/material
pnpm install -D tailwindcss postcss autoprefixer
pnpm tailwindcss init

Open tailwind.config.js and add the following code to module.exports:

module.exports = {
  // ...
  content: ["./src/**/*.{html,ts}"],
};

At the beginning of styles.scss, add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Testing

Install the Angular Testing Library along the user-event library:

pnpm i -D @testing-library/angular @testing-library/dom @testing-library/user-event

Next, install Playwright and install the accompanying browsers:

pnpm i -D @playwright/test
pnpm playwright install

---

Code Quality

For code quality, we install angular-eslint, eslint-plugin-unused-imports, husky, prettier,lint-staged and Sheriff.

pnpm ng add @angular-eslint/schematics
pnpm i -D eslint-plugin-unused-imports husky prettier lint-staged @softarc/{sheriff-core,eslint-plugin-sheriff}

To integrate eslint-plugin-unused-imports and sheriff into ESLint, add the following to eslint.config.js:

// exsting imports...

const sheriff = require("@softarc/eslint-plugin-sheriff");
const unusedImports = require("eslint-plugin-unused-imports");

module.exports = tseslint.config(
  // exsting setup...
  {
    files: ["**/*.ts"],
    extends: [sheriff.configs.all],
  },
  {
    plugins: { "unused-imports": unusedImports },
    rules: {
      "@typescript-eslint/no-unused-vars": "off",
      "unused-imports/no-unused-imports": "error",
      "unused-imports/no-unused-vars": [
        "warn",
        {
          vars: "all",
          varsIgnorePattern: "^_",
          args: "after-used",
          argsIgnorePattern: "^_",
        },
      ],
    },
  },
);

For defining barrel-less modulesyou can initialize the Sheriff configuration by running the following command:

pnpm sheriff init

Code formatting will be done by prettier, but only for staged files and before a commit:

pnpm husky init

Create the .lintstagedrc with the following content:

{
  "*.{js,ts,json,html,scss,css,md}": [
    "prettier --write"
  ]
}

.husky/pre-commit, should have the following content:

pnpm ng lint
pnpm ng test --watch=false
pnpm lint-staged --allow-empty

State Management

Next on the list is state management with the NgRx SignalStore. We also include the devtools extension for debugging purposes:

pnpm i @ngrx/signals @angular-architects/ngrx-toolkit

It is also important to use the official ESLint rules for NgRx:

pnpm i -D @ngrx/eslint-plugin-ngrx

Add the following to the ESLint configuration eslint.config.js:

// existing imports...
const ngrx = require("@ngrx/eslint-plugin/v9");

module.exports = tseslint.config(
  // existing config...
  {
    files: ["**/*.ts"],
    extends: [...ngrx.configs.signals],
  },
);

---

Enjoy your new Angular project setup! 🚀