You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: LICENSE.txt
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
The MIT License
2
2
3
-
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
3
+
Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
4
4
5
-
Copyright (c) 2024-2025 Joe Matthews, et al. https://github.com/joematthews/extreme-angular
5
+
Copyright (c) 2024-2026 Joe Matthews, et al. https://github.com/joematthews/extreme-angular
6
6
7
7
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
Copy file name to clipboardExpand all lines: README.md
+43-62Lines changed: 43 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
# Extreme Angular 21: A Stricter Starter Template
1
+
# Extreme Angular: A Stricter Starter Template
2
2
3
3

4
4
5
-
Extreme Angular is a pre-configured Angular starter template with strict development tools that enforce best practices, ensure consistent code quality, and promote accessibility. It remains fully compatible with the [official Angular documentation](https://angular.dev/overview).
5
+
Extreme Angular adds strict development tooling to a standard Angular project. Use it as a starter template or as a reference for configuring these tools in an existing project.
6
6
7
7
The underlying Angular project was generated with:
8
8
@@ -12,12 +12,18 @@ ng new --strict --zoneless --style=scss --ssr=false
12
12
13
13
## Why Use Extreme Angular
14
14
15
-
-**Skip weeks of setup** — ESLint, Prettier, Stylelint, CSpell, Git hooks, and CI work out of the box
16
-
-**Zero configuration conflicts** — all tools are tested to work together seamlessly
17
-
-**Focus on what matters** — discuss logic and architecture instead of arguing about formatting
18
-
-**Consistent quality** — automatic code standards and accessibility checks across your team
19
-
-**Clean foundation** — no custom code or complex workarounds needed
20
-
-**Zoneless by default** — smaller bundle size and better performance with Angular 21's zoneless change detection
15
+
Starting a new Angular project with `ng new` gives you a working app, but not the tooling layer that teams typically add over time. Extreme Angular bridges that gap:
16
+
17
+
-**ESLint** with angular-eslint, typescript-eslint (strict + stylistic), accessibility rules, and JSON linting
18
+
-**Prettier** with plugins for import sorting, CSS property ordering, and shell script formatting
19
+
-**Stylelint** for CSS and SCSS
20
+
-**CSpell** for spell checking
21
+
-**Husky + lint-staged** for pre-commit linting and pre-push validation
22
+
-**Commitlint** for conventional commit messages
23
+
-**GitHub Actions CI** for pull request validation
These tools are configured to work together without conflicts. Nothing here deviates from standard Angular — the [official Angular documentation](https://angular.dev/overview) applies without modification.
21
27
22
28
## Contributing
23
29
@@ -51,39 +57,33 @@ Found an issue? Check the [existing issues](https://github.com/joematthews/extre
If you have a GitHub account, an easy way to get started is to select "Use this template" in the top right corner of the [GitHub page for Extreme Angular](https://github.com/joematthews/extreme-angular) and then select "Create a new repository". This will allow you to rename your repository and set it to private.
59
-
60
-
Alternatively, if you do not have a GitHub account, I recommend cloning only the most recent commit and renaming the remote branch to 'upstream'. (Replace `new_project_name` with the name of _your_ project):
Use `CTRL+SHIFT+H` in VS Code to search and replace `extreme-angular` with your chosen project name.
71
+
Using `--origin=upstream` names the remote `upstream` instead of `origin`, making it possible to [pull in updates](#updating) later.
75
72
76
-
**Start developing:**
73
+
> [!TIP]
74
+
> You can also select "Use this template" on the [GitHub page](https://github.com/joematthews/extreme-angular) to create a new repository. Note that template repositories don't maintain a connection to the original, so pulling in updates requires [additional setup](#updating).
75
+
76
+
Search and replace `extreme-angular` with your project name across the codebase, then start developing:
77
77
78
78
```sh
79
79
npm start
80
80
```
81
81
82
82
> [!TIP]
83
-
> If you're using [VS Code](https://code.visualstudio.com/) and [Chrome](https://www.google.com/chrome/), then press `F5` on the keyboard to start the app in debug mode. For more information check out: [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript).
83
+
> If you're using [VS Code](https://code.visualstudio.com/) and [Chrome](https://www.google.com/chrome/), press `F5` to start the app in debug mode. For more information check out: [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript).
84
84
85
85
> [!TIP]
86
-
> The "Dev Tools Implemented" section below is project-agnostic -- consider adding it to your project's README.md or CONTRIBUTING.md!
86
+
> The "Dev Tools Implemented" section below is project-agnostic — consider adding it to your project's README.md or CONTRIBUTING.md!
87
87
88
88
## Dev Tools Implemented
89
89
@@ -156,11 +156,7 @@ To lint all relevant files in the project (not just those in src/):
156
156
npm run lint
157
157
```
158
158
159
-
ESLint output is formatted using [eslint-formatter-mo](https://github.com/fengzilong/eslint-formatter-mo). To use normal formatting, remove the `-f mo` option from the `lint` script in [package.json](package.json):
160
-
161
-
```json
162
-
"lint": "eslint -f mo \"**/*.{js,ts,html,json}\"",
163
-
```
159
+
ESLint output is formatted using [eslint-formatter-mo](https://github.com/fengzilong/eslint-formatter-mo). To use default formatting, remove `-f mo` from the `lint` script in [package.json](package.json).
164
160
165
161
> [!TIP]
166
162
> Suppress the urge to immediately set rules to "off" or "warn". First, look up the rule and the problem it is correcting for and discuss the rule with other developers on the project.
@@ -191,7 +187,7 @@ npm run lint:style
191
187
192
188
[Prettier](https://prettier.io/) is used to enforce consistent code formatting, reducing diffs by minimizing formatting changes.
193
189
194
-
The base settings in [.prettierrc.json](./.prettierrc.json) (`printWidth: 100`, `singleQuote: true`) match Angular 21 defaults. This template adds the following enhancements:
190
+
The base settings in [.prettierrc.json](./.prettierrc.json) (`printWidth: 100`, `singleQuote: true`) match Angular defaults. This template adds the following enhancements:
195
191
196
192
**htmlWhitespaceSensitivity: "ignore"** — Trims unnecessary whitespace around and inside HTML elements for cleaner templates. Use ` ` (non-breaking space) when you need to explicitly maintain spacing between inline elements.
197
193
@@ -234,7 +230,7 @@ npm run lint:spelling
234
230
235
231
### Testing
236
232
237
-
[Vitest](https://vitest.dev/) is the default unit test runner for Angular 21, replacing Karma. Tests run in Node.js using [jsdom](https://github.com/jsdom/jsdom) to simulate the DOM, providing fast test execution without browser overhead.
233
+
[Vitest](https://vitest.dev/) is the default unit test runner for Angular, replacing Karma. Tests run in Node.js using [jsdom](https://github.com/jsdom/jsdom) to simulate the DOM, providing fast test execution without browser overhead.
238
234
239
235
To run tests in watch mode:
240
236
@@ -305,7 +301,7 @@ The shove script will stage all files, commit with the commit message `wip: shov
305
301
306
302
The [on-pull-request.yml](.github/workflows/on-pull-request.yml) workflow triggers [validate-code.yml](.github/workflows/validate-code.yml) to check all files and run tests when a pull request is opened or updated.
307
303
308
-
Pull requests on GitHub cannot be merged until all checks and tests pass. The output of these workflows can found in the 'Actions' tab on the GitHub repository.
304
+
Pull requests on GitHub cannot be merged until all checks and tests pass. The output of these workflows can be found in the 'Actions' tab on the GitHub repository.
309
305
310
306
To execute these checks and tests locally:
311
307
@@ -321,7 +317,7 @@ Angular has powerful [Internationalization](https://angular.dev/guide/i18n) capa
321
317
322
318
If you plan to implement internationalization in the future, adding i18n attributes early on can make the process easier to scale naturally.
323
319
324
-
To enable the i18n ESLint rule, simply add the following rule to the \*.html section of [eslint.config.js](./eslint.config.js):
320
+
To enable the i18n ESLint rule, add the following rule to the \*.html section of [eslint.config.js](./eslint.config.js):
325
321
326
322
```js
327
323
"@angular-eslint/template/i18n":"error",
@@ -333,7 +329,7 @@ To enable the i18n ESLint rule, simply add the following rule to the \*.html sec
333
329
> [!TIP]
334
330
> Using `eslint --fix` can automatically add i18n tags in many cases.
335
331
336
-
## End to End Testing (e2e)
332
+
###End to End Testing (e2e)
337
333
338
334
Angular has schematics available for several end to end testing frameworks. The [Angular End to End Testing guide](https://angular.dev/tools/cli/end-to-end) will walk you through the steps to set one up.
339
335
@@ -357,7 +353,7 @@ These are tips and tricks that are too opinionated or situational to include in
357
353
358
354
### Custom Formatting
359
355
360
-
This project uses Angular 21's formatting defaults: 2 space indentation, 100 character line width, and single quotes. Here's how to customize if needed:
356
+
This project uses Angular's formatting defaults: 2 space indentation, 100 character line width, and single quotes. Here's how to customize if needed:
361
357
362
358
**Indentation** — set indent_size in [.editorconfig](.editorconfig):
I _highly_ recommend enabling [inlay hints in VS Code](https://code.visualstudio.com/Docs/editor/editingevolved#_inlay-hints). They give me the confidence to use TypeScript's [type inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) without feeling the need specify types 'for visibility'.
420
+
Consider enabling [inlay hints in VS Code](https://code.visualstudio.com/Docs/editor/editingevolved#_inlay-hints). They make it easier to rely on TypeScript's [type inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) without feeling the need to specify types 'for visibility'.
425
421
426
422
Add the following to the VS Code user settings to enable all inlay hints for JavaScript & TypeScript:
427
423
@@ -452,9 +448,9 @@ To temporarily disable inlay hints use `CTRL + ALT` (or `CTRL + OPTION` on Mac)
452
448
453
449
### Font Ligatures
454
450
455
-
VS Code is capable of using 'font ligatures' -- not everyone likes font ligatures, but I really enjoy them.
451
+
VS Code is capable of using 'font ligatures' -- they are worth trying if you haven't already.
456
452
457
-
The two most popular fonts that support font ligatures are [Fira Code](https://github.com/tonsky/FiraCode) and [Jet Brains Mono](https://www.jetbrains.com/lp/mono/). I typically use the 'Regular' `*.ttf` variant of each font.
453
+
The two most popular fonts that support font ligatures are [Fira Code](https://github.com/tonsky/FiraCode) and [Jet Brains Mono](https://www.jetbrains.com/lp/mono/). The 'Regular' `*.ttf` variant of each font is a good starting point.
458
454
459
455
After downloading and installing the font of choice, add the font to the `fontFamily` and enable `fontLigatures` in the VS Code user settings:
460
456
@@ -496,40 +492,25 @@ Here are some tips for configuring the dev tools for this project in JetBrains I
496
492
## Updating
497
493
498
494
> [!WARNING]
499
-
> Depending on the maturity of the project, it may be better to look at the current configuration files for extreme-angular & [release notes](https://github.com/joematthews/extreme-angular/releases) and then manually make changes instead of merging. If the Angular version has changed, then follow the [guide to update Angular](https://angular.dev/update) first before attempting to merge or make changes.
495
+
> If the Angular version has changed, follow the [Angular update guide](https://angular.dev/update) before merging. For mature projects with heavy customization, reviewing the [release notes](https://github.com/joematthews/extreme-angular/releases) and applying changes manually may be safer than merging.
500
496
501
-
To pull in the latest changes, check out an 'update' branch and merging the latest changes from `upstream/main`:
497
+
If you don't have an `upstream` remote (e.g., you used "Use this template"), add one:
> The name of the remote may not be `upstream` depending on how this project was cloned.
511
-
512
-
There may be [merge conflicts](https://code.visualstudio.com/docs/sourcecontrol/overview#_merge-conflicts) that need to be resolved. After a successful merge, install dependencies and then format, lint, test, and fix any new errors for all files:
511
+
Resolve any [merge conflicts](https://code.visualstudio.com/docs/sourcecontrol/overview#_merge-conflicts), then install dependencies and validate:
513
512
514
513
```sh
515
514
npm install
516
515
npm run ci:all
517
516
```
518
-
519
-
## License Considerations
520
-
521
-
The documentation and configuration files in this project are licensed under the [MIT license](https://tlo.mit.edu/understand-ip/exploring-mit-open-source-license-comprehensive-guide).
522
-
523
-
I keep the copyright from [Angular's license](https://angular.dev/license) and add my own copyright.
524
-
525
-
If your project also uses the MIT license, then please consider adding a new copyright line to [LICENSE.txt](LICENSE.txt):
526
-
527
-
```txt
528
-
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
529
-
530
-
Copyright (c) 2024-2025 Joe Matthews, et al. https://github.com/joematthews/extreme-angular
531
-
532
-
Copyright (c) 2025 Your Name or Company
533
-
```
534
-
535
-
If your project is [closed source](https://simple.wikipedia.org/wiki/Closed_source) or uses a [different license](https://opensource.org/licenses), then please consider renaming the file to `LICENSE-Angular.txt`.
0 commit comments