build(angular): create project with `Angular CLI 21` and `Node.js 24`

# build(angular): create project with `Angular CLI 21` and `Node.js 24`

| ⏱️ Estimate | 📊 Priority | 📏 Size | 📅 Start | 📅 End |
| --- | --- | --- | --- | --- |
| 2h | P0 | S | 02-03-2026 | 02-03-2026 |

## 📸 Screenshots

| Current | Expected |
| :---: | :---: |
| N/A — This change has no visual impact. | |

## 📝 Summary

- Create a new `Angular` project using `Angular CLI 21`
- Use `Node.js 24` as the runtime environment
- Configure `Vitest` as the testing framework
- Use `standalone` components with `Signals API`

## 💡 Why this change?

- Base scaffold needed to start the project configuration
- `Angular 21` is the latest stable version with `standalone` components by default
- `Vitest` replaces `Karma`/`Jasmine` as a faster and modern test runner

## ✅ Benefits

- Modern `Angular 21` project with `standalone` components (no `NgModule`)
- `Signals API` for reactive state management
- `Vitest` for faster unit testing
- `VS Code` configuration for debugging and `Angular Language Service`

## 📋 Steps

### Phase 0: Initialize repository (already done)
> This phase documents the initial steps performed before the feature branch.

- [x] Install `Angular CLI` globally:

```bash
npm install -g @angular/cli
```

> The `npm install -g` command installs `Angular CLI` globally so the `ng` command is available system-wide for creating projects, generating components and running other CLI commands. Without it, you would need to use `npx @angular/cli` each time, which downloads a temporary copy that is not persisted.

- [x] Create Angular project without git:

```bash
ng new angular-setup --skip-git
cd angular-setup
```

> The `ng new` command initializes its own git repository by default. Using `--skip-git` allows setting up git flow manually with `main` and `develop` branches before making any commits. This way `main` and `develop` start empty, following the git flow convention.

Interactive options selected:

```text
Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.dev/cli/analytics.

Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
✔ Which stylesheet system would you like to use? CSS [
https://developer.mozilla.org/docs/Web/CSS ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
✔ Which AI tools do you want to configure with Angular best practices?
https://angular.dev/ai/develop-with-ai None
CREATE angular-setup/.prettierrc (161 bytes)
...
```

- [x] Initialize git repository:

```bash
git init
```

> The default branch created by `git init` is `main` (configured in `git config --global init.defaultBranch`). Since `Git 2.28` (2020), the default branch name can be configured globally. `GitHub`, `GitLab` and `Bitbucket` adopted `main` as the default in 2020 to replace `master`, following an industry-wide move toward more inclusive terminology.

- [x] Create initial empty commit:

```bash
git commit --allow-empty -m "build(repo): init empty repository"
```

> Adding `Angular` to the project is itself a task (issue) and a project decision, so it belongs in its own feature branch. By creating an empty initial commit first and pushing it to GitHub, we can create issues to document each task before starting the work. This way the feature branch commit can reference the issue (e.g. `Issue #1`) and every step is properly tracked in the project history.

- [x] Initialize git flow:

```bash
git flow init
```

> The `git flow init` command assigns roles to existing branches and configures branch prefixes. It sets `main` as the production branch and creates `develop` as the development branch. It also configures prefixes for `feature/`, `release/`, `hotfix/` and `support/` branches.

```text
Which branch should be used for bringing forth production releases?
- main
Branch name for production releases: [main]
Branch name for "next release" development: [develop]

How to name your supporting branch prefixes?
Feature branches? [feature/]
Release branches? [release/]
Hotfix branches? [hotfix/]
Support branches? [support/]
Version tag prefix? []
```

- [x] Rename default branch from `main` to `master` and update `git flow` config:

```bash
git branch -m main master
git config gitflow.branch.master master
```

> By convention, `master` is used as the production branch in all other repositories. Renaming `main` to `master` keeps consistency across projects. The `git config` command updates the `git flow` configuration to match the new branch name.
- [x] Configure `gh` CLI to use SSH protocol:

```bash
gh config set git_protocol ssh
```

> The `gh` CLI uses HTTPS by default when creating repositories. Setting the protocol to SSH ensures that the remote URL is configured as `git@github.com:` instead of `https://github.com/`, which is consistent with how authentication is set up in all other repositories. Without this, pushing branches from `Sourcetree` will fail with "Password authentication is not supported" since `GitHub` no longer accepts password authentication over HTTPS.

- [x] Switch to `master` before creating the repository:

```bash
git checkout master
```

> The `gh repo create --source=. --push` command pushes the current branch and sets it as the default branch on `GitHub`. Switching to `master` first ensures that `master` becomes the default branch, consistent with all other repositories.

- [x] Create empty repository on GitHub (without README, `.gitignore` or LICENSE):

```bash
gh repo create beatrizsmerino/angular-setup --public --source=. --push --description "A base Angular setup project with ESLint, Prettier and TypeScript configuration"
```
- [x] Add topics:

```bash
gh repo edit beatrizsmerino/angular-setup --add-topic angular,eslint,frontend,prettier,setup,typescript
```
- [x] Push `develop` branch:

```bash
git push -u origin develop
```
- [x] Enable branch protection on `master` (require PR review, enforce admins, no force push):

```bash
gh api repos/beatrizsmerino/angular-setup/branches/master/protection -X PUT --input - <<'EOF'
{
"required_status_checks": {
"strict": true,
"contexts": []
},
"enforce_admins": true,
"required_pull_request_reviews": {
"required_approving_review_count": 1
},
"restrictions": null
}
EOF
```
- [x] Delete extra default labels and update existing ones:

```bash
gh label delete invalid --yes
gh label delete question --yes
gh label delete wontfix --yes
gh label edit bug --color "d73a4a" --description "Something isn't working"
gh label edit documentation --color "58a6ff" --description "Documentation changes"
gh label edit duplicate --color "cfd3d7" --description "Already exists"
gh label edit enhancement --color "2ecc71" --description "New feature or request"
gh label edit "good first issue" --color "7057ff" --description "Good for newcomers"
gh label edit "help wanted" --color "008672" --description "Extra attention is needed"
```
- [x] Create custom labels:

```bash
gh label create "configuration" --color "7b1fa2" --description "Project setup and configuration files"
gh label create "dependabot" --color "0366d6" --description "Dependabot configuration and automated PRs"
gh label create "dependencies" --color "8b4513" --description "Dependency updates"
gh label create "deployment" --color "9f1239" --description "Deployment and production"
gh label create "forms" --color "84cc16" --description "Forms and validation"
gh label create "github_actions" --color "000000" --description "GitHub .github/ folder configuration"
gh label create "hacktoberfest" --color "ff6b08" --description "Hacktoberfest event"
gh label create "layout" --color "fd7a5a" --description "UI components"
gh label create "routing" --color "06b6d4" --description "Routing and navigation"
gh label create "seo" --color "ca8a04" --description "SEO and meta tags"
gh label create "testing" --color "a855f7" --description "Testing and QA"
```
- [x] Create milestones:

```bash
gh api repos/beatrizsmerino/angular-setup/milestones -X POST -f title="Dependabot" -f description="Automated dependency updates by Dependabot" -f state="open"
gh api repos/beatrizsmerino/angular-setup/milestones -X POST -f title="Project Setup" -f description="Project configuration and setup" -f state="open"
gh api repos/beatrizsmerino/angular-setup/milestones -X POST -f title="Migration" -f description="Migration tasks: framework upgrades, tooling updates and breaking changes" -f state="open"
```
- [x] Link repository to GitHub Project:

```bash
gh project link 25 --owner beatrizsmerino --repo beatrizsmerino/angular-setup
```

### Phase 1: Create feature branch and commit Angular project
- [x] Create feature branch:

```bash
git flow feature start init-angular
```
- [x] Add all Angular project files and commit:

```bash
git add .
git commit
```

Commit message:

```text
build(angular): create project with `Angular CLI 21.2.0` and `Node.js 24`

Steps:
- Set `Node.js` version:
`nvm use 24`
- Create `Angular` project:
`npx @angular/cli@21 new angular-setup --skip-git`
- Select interactive options:
✔ Which stylesheet system would you like to use? `CSS`
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? `No`
✔ Which AI tools do you want to configure with Angular best practices? `None`

Reason:
- Initialize Angular project as base for frontend setup configuration
- Angular CLI requires a minimum `Node.js` version of `v20.19` or `v22.12`

References:
- Issue #1
- https://angular.dev/tools/cli/setup-local
- https://nodejs.org/
```

## 🧪 Tests

- [x] Verify the project contains the expected Angular file structure:

```
angular-setup/
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ ├── mcp.json
│ └── tasks.json
├── public/
│ └── favicon.ico
├── src/
│ ├── app/
│ │ ├── app.config.ts
│ │ ├── app.css
│ │ ├── app.html
│ │ ├── app.routes.ts
│ │ ├── app.spec.ts
│ │ └── app.ts
│ ├── index.html
│ ├── main.ts
│ └── styles.css
├── .editorconfig
├── .gitignore
├── angular.json
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
```

- [x] Run dev server and verify the app serves at `http://localhost:4200`:

```bash
npm start
```
- [x] Run unit tests and verify they pass:

```bash
npm test
```
- [x] Run build and verify output generates in `dist/`:

```bash
npm run build
```

## 📌 Notes

- The project uses `@angular/build:application` builder (not the legacy `webpack` builder)
- Testing uses `@angular/build:unit-test` with `Vitest` (not `Karma`)
- The root component uses `signal()` for the title property

## 🔗 References

### Documentation
- https://angular.dev/tools/cli
- https://angular.dev/guide/components
- https://angular.dev/guide/signals
- https://vitest.dev/