|
| 1 | +--- |
| 2 | +name: angular |
| 3 | +description: Conventions for Angular applications |
| 4 | +--- |
| 5 | + |
| 6 | +## 1. In all setup files, the target should be esnext |
| 7 | + |
| 8 | +### Example in `tsconfig.json`: |
| 9 | + |
| 10 | +Replace: |
| 11 | + |
| 12 | +```json |
| 13 | +{ |
| 14 | + "compilerOptions": { |
| 15 | + "target": "es5", |
| 16 | + "lib": ["es5", "dom"], |
| 17 | + "types": ["cypress", "node"] |
| 18 | + }, |
| 19 | + "include": ["**/*.ts"] |
| 20 | +} |
| 21 | +``` |
| 22 | + |
| 23 | +with |
| 24 | + |
| 25 | +```json |
| 26 | +{ |
| 27 | + "compilerOptions": { |
| 28 | + "target": "esnext", |
| 29 | + "lib": ["esnext", "dom"], |
| 30 | + "types": ["cypress", "node"] |
| 31 | + }, |
| 32 | + "include": ["**/*.ts"] |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +## 2. Make sure that the code strictly follows all angular standards |
| 37 | + |
| 38 | +Please find the list of alle angular standards on the following page: https://angular.dev/style-guide. |
| 39 | +It is of the utmost importance that all configuration, HTML, TypeScript, JavaScript, and everything that consists of an angular project, to follow these standards. |
| 40 | +Changes should be made accordingly. |
| 41 | +Modernize the build tooling too |
| 42 | + |
| 43 | +## 3. Make sure that Angular projects are completely reactive with the usage of signals. |
| 44 | + |
| 45 | +With the inception of signals, reactive programming for the front-end has been made easy. Make sure that, whenever possible, that the code uses signals instead of the typical subscriber model. |
| 46 | +Find information on how to do this with good practices over at: https://angular.dev/guide/signals |
| 47 | +Refactor subscribe() to resource()/rxResource() |
| 48 | + |
| 49 | +## 4. Make sure to use new methods for deprecated classes |
| 50 | + |
| 51 | +The `RouterTestingModule` and the `HttpClientTestingModule` have been deprecated. Can you make sure to replace the TypeScript declarations accordingly? |
| 52 | + |
| 53 | + |
| 54 | +From `RouterTestingModule`. |
| 55 | + |
| 56 | +```text |
| 57 | +Use provideRouter or RouterModule/RouterModule.forRoot instead. This module was previously used to provide a helpful collection of test fakes, most notably those for Location and LocationStrategy. These are generally not required anymore, as MockPlatformLocation is provided in TestBed by default. However, you can use them directly with provideLocationMocks. |
| 58 | +``` |
| 59 | + |
| 60 | +From `HttpClientTestingModule`. |
| 61 | + |
| 62 | +```text |
| 63 | +Add provideHttpClientTesting() to your providers instead. |
| 64 | +``` |
| 65 | + |
| 66 | +Use both definitions to make the changes wherever possible. |
| 67 | + |
| 68 | +## 6. Update the build system, if necessary |
| 69 | + |
| 70 | +Follow the documentation on https://angular.dev/tools/cli/build-system-migration to make a successful build migration |
| 71 | + |
| 72 | +## 7. Use scss/css standards for scss files |
| 73 | + |
| 74 | +In old projects, very little attention was given to scss standards. |
| 75 | +Here we want to make sure that all scss is being applied according to the scss documents over at: |
| 76 | + |
| 77 | +1. https://sass-lang.com/documentation/syntax/ |
| 78 | +2. https://sass-lang.com/documentation/ |
| 79 | + |
| 80 | +When possible, make sure to optimize the use of scss for grids. |
| 81 | +Documentation can be found here: |
| 82 | + |
| 83 | +1. https://css-tricks.com/complete-guide-css-grid-layout/ |
| 84 | + |
| 85 | +## 8. Checklist |
| 86 | + |
| 87 | +[] All targets in `tsconfig.json` files should be set to `esnext` |
| 88 | +[] No target should remain with old target compiler option versions |
0 commit comments