@dsivd/prestations-ng 19.0.0-beta.3 → 19.0.0-beta.5

package/UPGRADING_V19.md

@@ -172,3 +172,1145 @@ mvn -U org.openrewrite.maven:rewrite-maven-plugin:run -Drewrite.activeRecipes=or
 ```
 
 Take a look at Sonar to see other things that you can improve or ignore.
+
+## PRESTATIONS-NG
+
+For the commands in this guide, it is supposed that your are in the `front` folder of your project.
+
+The main feature in `prestations-ng` v19 is the update of the `@angular/*` peer dependencies
+to `^21.2.14`, using `node 22+` to build, `npm 10+` for package manager and `Foehn 2+ (Bootstrap 5+)` for our design system.
+
+A lot of breaking because our library has migrated to **standalone** components, **signals** and **inject function** instead of constructor injection parameters.
+
+> 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8**
+
+### Migrate to ESLint
+
+(NB : you can skip this step if you already have a `front/.eslintrc.json` file, it means it is already done.)
+
+Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint.
+
+### Upgrade to Angular 20
+
+Just FYI if you are curious about the details, you can find the Angular update guide at this address [https://angular.dev/update-guide?v=19.0-20.0&l=1](https://angular.dev/update-guide?v=19.0-20.0&l=1)
+
+**NB: Commit before continuing so your repository is clean.**
+
+Remove your `resolutions` in `package.json` before starting : if you have `resolutions` in `package.json`, remove manually the section.
+
+In the next commands, commit before each ng update.
+
+Unlink `@dsivd/prestations-ng` by running `yarn unlink @dsivd/prestations-ng` in your `front` folder if you have linked it before.
+
+```bash
+npm install
+npm install @angular/cli@19 -g
+ng update @angular/core@19 @angular/cli@19
+ng update @dsivd/prestations-ng@18
+```
+
+```bash
+npm install @angular/cli@20 -g
+ng update @angular/core@20 @angular/cli@20
+```
+
+When asked the question "Select the migrations that you'd like to run",
+
+accept **"use-application-builder"** by hitting "Space" key then "Enter".
+
+When asked the question "Select the migrations that you'd like to run",
+
+accept **"control-flow-migration"** by hitting "Space" key.
+
+accept **"router-current-navigation"** by hitting "Space" key.
+
+Then press "Enter" key.
+
+**IMPORTANT: Search for every `@for` in your project and check that `track` statement is present and has a unique identifier**
+
+**NB: When using `@angular/cdk` in your project**
+
+```bash
+ng update @angular/cdk@20
+```
+
+### Running with node 22+
+
+#### Switch to node 22+
+
+##### If you are using our `slave-apps`
+
+Be sure to update your `slave-apps` git repository and source your `.bashrc` (or whatever file you're using).
+
+Verify your node version in your terminal by executing:
+
+```bash
+node -v
+```
+
+**NB: If version is still v20+ by default, type `node22` in your terminal to switch to node v22+**
+
+```bash
+node22
+```
+
+##### If you are NOT using our `slave-apps`
+
+Be sure to use a node version 22+ in your terminal:
+
+```bash
+node -v
+```
+
+#### In your project
+
+Update your `package.json` file to specify the node engine:
+
+```json
+{
+    "engines": {
+        "node": ">=22.18.0"
+    }
+}
+```
+
+#### Update your jenkins files
+
+- Change `nodeVersion: 20` to use node 22
+
+##### UT folder
+
+```diff
+buildAppPipelinePodmanUT([
+-   node: 20,
++   node: 22,
+])
+```
+
+### Upgrade to Angular 21
+
+`prestations-ng` **v19+** now supports **Angular v21**.
+
+Just FYI if you are curious about the details, you can find the Angular update guide at this address [https://angular.dev/update-guide?v=20.0-21.0&l=1](https://angular.dev/update-guide?v=20.0-21.0&l=1)
+
+**NB: Commit before continuing so your repository is clean.**
+
+```bash
+npm install @angular/cli@21 -g
+ng update @dsivd/prestations-ng@latest
+```
+
+When asked again the question "Select the migrations that you'd like to run",
+
+accept **"router-current-navigation"** by hitting "Space" key then "Enter".
+
+```bash
+ng update @angular/cli@21
+```
+
+When asked the question "Select the migrations that you'd like to run",
+
+accept **"use-application-builder"** by hitting "Space" key then "Enter".
+
+```bash
+npm install @types/node@22 ts-node@10
+```
+
+**NB: When using `@angular/cdk` in your project**
+
+```bash
+ng update @angular/cdk@21
+```
+
+**NB: When using `ngx-matomo-client` in your project**
+
+```bash
+ng update ngx-matomo-client@9
+```
+
+### Quick fix
+
+In all custom components extending `FoehnInputComponent`, in `providers` providing `FoehnInputComponent` remove `multi: true,`
+
+```diff
+{
+   provide: FoehnInputComponent,
+   useExisting: forwardRef(() => ItemListComponent),
+-  multi: true,
+}
+```
+
+In your `.eslintrc.json`, remove `"/src/main.ts",` from `ignorePatterns`
+
+In `main.ts`, replace `platformBrowserDynamic` by `platformBrowser`
+
+### Now fix your project before continuing
+
+**IMPORTANT: Fix your project because our new prestations-ng v19+ is standalone, uses signals instead of observables and inject function instead of constructor injection parameter.**
+
+Remove all your `@dsivd/prestations-ng` imports of modules and make sure you are using the new standalone components instead by adding them directly from your html file "alt+enter".
+
+Check every `constructor` in your project, and remove useless `constructor` parameters that are not used anymore (like `ActivatedRoute` in components extending `AbstractPageComponent`).
+
+Run the following command until you have no more errors.
+
+```bash
+npm run build
+```
+
+**TIP: If your IntelliJ is still showing you errors on `@if` or `@for`, close it and re-open it to fix.**
+
+### Migrate to inject function
+
+```bash
+ng generate @angular/core:inject
+```
+
+✔ Which directory do you want to migrate? **./**
+
+✔ Do you want to migrate abstract classes? Abstract classes are not migrated by default, because their parameters aren't guaranteed to be injectable. **Yes**
+
+✔ Do you want to clean up all constructors or keep them backwards compatible? Enabling this option will include an additional signature of `constructor(...args:
+ unknown[]);` that will avoid errors for sub-classes, but will increase the amount of generated code by the migration. **No**
+
+✔ Do you want optional inject calls to be non-nullable? Enable this option if you want the return type to be identical to @Optional(), at the expense of worse
+type safety. **Yes**
+
+Go through every file that has changed and fix what is broken.
+
+Reorder public / private and remove unused imports so ESLINT is happy again.
+
+For example, when extending `AbstractPageComponent`:
+Before:
+
+```ts
+sessionInfoData: SessionInfoWithApplicationService;
+
+constructor(
+    protected override activatedRoute: ActivatedRoute,
+    private readonly dictionaryService: SdkDictionaryService,
+    sessionInfoData: SessionInfoWithApplicationService
+) {
+    super(activatedRoute);
+    this.sessionInfoData = sessionInfoData;
+}
+```
+
+After:
+
+```ts
+sessionInfoData = inject(SessionInfoWithApplicationService);
+
+private readonly dictionaryService = inject(SdkDictionaryService);
+```
+
+Most of the time, you can remove `activatedRoute` because it was used as a constructor parameter for `AbstractPageComponent`.
+
+### Migrate to self-closing tags
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:self-closing-tag
+```
+
+✔ Which directory do you want to migrate? **./**
+
+### Migrate to standalone
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:standalone
+```
+
+Choose **"Convert all components, directives and pipes to standalone"** then
+
+✔ Which directory do you want to migrate? **./**
+
+```bash
+npm run build
+```
+
+```bash
+ng generate @angular/core:standalone
+```
+
+Choose **"Remove unnecessary NgModule classes"** then
+
+✔ Which directory do you want to migrate? **./**
+
+```bash
+npm run build
+```
+
+```bash
+ng generate @angular/core:standalone
+```
+
+Choose **"Bootstrap the application using standalone APIs"** then
+
+✔ Which directory do you want to migrate? **./**
+
+#### Now check and fix manually the migration of your `app.component.ts` to standalone
+
+It should look like that:
+
+```diff
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [
+-       // eslint-disable-next-line @angular-eslint/prefer-standalone
+-       standalone: false
++       RouterOutlet,
++       NgHttpLoaderComponent,
++       RedirectComponent,
+    ]
+})
+```
+
+Create a file under `src/app` called `app.routes.ts` with the following content:
+
+```ts
+export const routes: Routes = [
+    // Your routes found in app-routing.module.ts go here
+];
+```
+
+Create a file under `src/app` called `app.config.ts` with the following content:
+
+```ts
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZoneChangeDetection(),
+        providePrestationsNgCore(),
+        provideRouter(routes),
+        META_SERVICE_PROVIDER,
+        provideHttpClient(
+            withInterceptors([pendingRequestsInterceptor$]),
+            withXsrfConfiguration({
+                cookieName: 'XSRF-TOKEN',
+                headerName: 'X-XSRF-TOKEN',
+            }),
+        ),
+    ],
+};
+```
+
+Now replace the content of `main.ts` with the following content:
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+    console.error(err),
+);
+```
+
+Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if it has not already been done.
+
+### Migrate from NgClass to class bindings
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:ngclass-to-class
+```
+
+✔ Which directory do you want to migrate? **./**
+
+✔ Should the migration also migrate space-separated keys? **Yes**
+
+Check every file that has changed and fix what is broken.
+
+Check remaining `ngClass` usage in your project and replace it with class bindings.
+
+**Be aware that `[class]` replaces all element classes. When you have static classes, concatenate them with dynamic ones.**
+
+Replacement example:
+
+Before:
+
+```html
+[ngClass]="isLabelSrOnly ? 'visually-hidden' : 'vd-p'"
+```
+
+After:
+
+```html
+[class.visually-hidden]="isLabelSrOnly()" [class.vd-p]="!isLabelSrOnly()"
+```
+
+---
+
+Before:
+
+```html
+class="modal" [ngClass]="modalSize"
+```
+
+After:
+
+```html
+[class]="'modal ' + modalSize()"
+```
+
+---
+
+Before:
+
+```html
+class="form-label" [ngClass]="isLabelSrOnly() ? 'visually-hidden' :
+labelStyleModifier()"
+```
+
+After:
+
+```html
+[class]="'form-label ' + (isLabelSrOnly() ? 'visually-hidden' :
+(labelStyleModifier() ?? ''))"
+```
+
+### Migrate from NgStyle to style bindings
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:ngstyle-to-style
+```
+
+✔ Which directory do you want to migrate? **./**
+
+✔ Should the migration also migrate object references? **No**
+
+Check every file that has changed and fix what is broken.
+
+Check remaining `ngStyle` usage in your project and replace it with style bindings.
+
+### Convert CommonModule usage to standalone imports
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:common-to-standalone
+```
+
+✔ Which directory do you want to migrate? **./**
+
+Check every file that has changed and fix what is broken.
+
+### Migrate @HostListener
+
+Search for `@HostListener` in your project and replace it with the `host` object in the `@Component` or `@Directive` decorator.
+
+For example, when using `@HostListener` in a directive:
+
+Before:
+
+```ts
+@Directive({
+    selector: '[numberCurrencyFormatter]',
+})
+export class NumberCurrencyFormatterDirective implements OnInit {
+    @HostListener('blur', ['$event.target.value'])
+    onBlur(value: string): void {
+        this.hasFocus = false;
+        this.setFormatting(value);
+    }
+}
+```
+
+After:
+
+```ts
+@Directive({
+    selector: '[numberCurrencyFormatter]',
+    host: {
+        '(blur)': 'onBlur($event)',
+    },
+})
+export class NumberCurrencyFormatterDirective implements OnInit {
+    onBlur(event: FocusEvent): void {
+        this.hasFocus = false;
+        const value = (event.target as HTMLInputElement).value;
+        this.setFormatting(value);
+    }
+}
+```
+
+### Migrate to signal queries
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:signal-queries-migration --insert-todos
+```
+
+✔ Which directory do you want to migrate? **./**
+
+✔ Do you want to migrate as much as possible, even if it may break your build? **No**
+
+Check every file that has changed and fix what is broken.
+
+Check every remaining `@ViewChild`, `@ViewChildren`, `@ContentChild`, and `@ContentChildren` usage in your project and replace them with signal queries.
+
+Check every **TODO** comment added by the migration and fix them.
+
+### Migrate to output functions
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:output-migration
+```
+
+✔ Which directory do you want to migrate? **./**
+
+Check every remaining `@Output` usage in your project and replace them with output function.
+
+When needing to subscribe to an output, you can use `outputToObservable` from `@angular/core/rxjs-interop`.
+
+### Migrate to input signals
+
+Check our [Angular signals guide](ANGULAR_SIGNALS.md) for more information about signals and input signals.
+
+**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+
+```bash
+npm run build
+```
+
+Fix remaining errors and warnings, then run the following command:
+
+```bash
+ng generate @angular/core:signal-input-migration --insert-todos
+```
+
+✔ Which directory do you want to migrate? **./**
+
+✔ Do you want to migrate as much as possible, even if it may break your build? **No**
+
+Check every file that has changed and fix what is broken.
+
+Check every remaining `@Input` usage in your project and replace them with input signals.
+
+Check every **TODO** comment added by the migration and fix them.
+
+### Migrate to vitest
+
+[Angular migration guide: migrating to Vitest](https://angular.dev/guide/testing/migrating-to-vitest)
+
+```bash
+npm install --save-dev vitest jsdom
+```
+
+In your `angular.json` file, remove `"zone.js/dist/zone-error"` from `"allowedCommonJsDependencies"`
+
+then find the `test` target for your project and change the `builder` to `@angular/build:unit-test` and add following options:
+
+```json
+{
+    "projects": {
+        "your-project-name": {
+            "architect": {
+                "test": {
+                    "builder": "@angular/build:unit-test",
+                    "options": {
+                        "buildTarget": "your-project-name:build"
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+In your package.json file, add the following scripts:
+
+```diff
+{
+    "scripts": {
+-       "test": "ng test",
++       "test": "ng test --watch=false",
+    }
+}
+```
+
+In your `tsconfig.spec.json` file, remove from `types` `jasmine` and `node` and add `vitest/globals`:
+
+```diff
+{
+    "compilerOptions": {
+        "types": [
+-           "jasmine",
+-           "node"
++           "vitest/globals"
+        ]
+    }
+}
+```
+
+In your `.gitignore` file, add the following line to ignore the `screenshot` folder:
+
+```
+__screenshots__
+```
+
+Now remove karma and jasmine dependencies
+
+```bash
+npm uninstall jasmine jasmine-core jasmine-spec-reporter
+npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
+npm uninstall puppeteer
+npm uninstall @types/jasmine @types/jasminewd2
+rm karma.conf.js
+```
+
+Now search for `karma.conf.js` in your project and remove all references to it.
+Now search for `protractor.conf.js` in your project and remove them if they still exist.
+
+Then run following command to migrate from jasmine to vitest:
+
+```bash
+ng g @schematics/angular:refactor-jasmine-vitest
+```
+
+Now you can run your tests with `npm test` and check that everything is up and running.
+
+In your tests, replace `waitForAsync(() => ...)` by `async(...)` and add `await` before `TestBed.configureTestingModule`.
+For example, replace this:
+
+Before:
+
+```ts
+import {
+    provideHttpClient,
+    withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [AppModule, RouterModule.forRoot([])],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
+```
+
+After:
+
+```ts
+import {
+    provideHttpClient,
+    withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AppComponent],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                provideRouter([]),
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
+```
+
+### Migrate to eslint flat configuration
+
+```bash
+npm uninstall @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
+npm uninstall @typescript-eslint/eslint-plugin @typescript-eslint/parser @typescript-eslint/types @typescript-eslint/utils
+npm uninstall eslint-import-resolver-typescript eslint-plugin-cypress eslint-plugin-import eslint-plugin-jasmine eslint-plugin-rxjs eslint-plugin-rxjs-angular eslint-plugin-simple-npm eslint-plugin-simple-import-sort
+npm uninstall eslint
+
+npm install --save-dev eslint@^9 angular-eslint@21 typescript-eslint@^8
+npm install --save-dev @typescript-eslint/parser@8 @smarttools/eslint-plugin-rxjs@1
+npm install --save-dev eslint-plugin-simple-import-sort@13
+npm install --save-dev eslint-config-prettier@10
+npm install --save-dev eslint-plugin-import-x@4
+npm install --save-dev prettier
+```
+
+In your `front` folder, add a `.prettierrc` file with the following content:
+
+```json
+{
+    "printWidth": 100,
+    "singleQuote": true,
+    "arrowParens": "always",
+    "trailingComma": "all",
+    "htmlWhitespaceSensitivity": "css",
+    "overrides": [
+        {
+            "files": ["*.html"],
+            "options": {
+                "parser": "angular"
+            }
+        }
+    ]
+}
+```
+
+Add a `.prettierignore` file with the following content:
+
+```text
+node_modules
+.git
+target
+package.json
+package-lock.json
+dist
+coverage
+.angular
+```
+
+Remove your old `.eslintrc.json` file in your `front` folder:
+
+```bash
+rm .eslintrc.json
+```
+
+Now search for `.eslintrc.json` in your project and remove them.
+
+Then add a new `eslint.config.mjs` file with the following content:
+
+```ts
+// @ts-check
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import angular from 'angular-eslint';
+import rxjs from '@smarttools/eslint-plugin-rxjs';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import prettier from 'eslint-config-prettier';
+import importX from 'eslint-plugin-import-x';
+
+export default tseslint.config(
+    {
+        ignores: ['**/coverage/**', '**/dist/**'],
+    },
+
+    // ─── TypeScript ────────────────────────────────────────────────────────────
+    {
+        files: ['**/*.ts'],
+        extends: [
+            eslint.configs.recommended,
+            ...tseslint.configs.recommended, // covers: no-explicit-any, ban-ts-comment,
+            //   no-unused-expressions, no-var, no-unused-vars…
+            ...tseslint.configs.stylistic, // covers: array-type, consistent-type-assertions,
+            //   dot-notation, no-inferrable-types (default options),
+            //   no-empty-function (error), prefer-for-of,
+            //   prefer-function-type…
+            ...angular.configs.tsRecommended, // covers: prefer-inject, no-empty-lifecycle-method,
+            //   use-lifecycle-interface…
+        ],
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        plugins: {
+            rxjs,
+            'simple-import-sort': simpleImportSort,
+            'import-x': importX,
+        },
+        processor: angular.processInlineTemplates,
+        rules: {
+            // ── @angular-eslint ──────────────────────────────────────────────
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+
+            // ── @typescript-eslint ───────────────────────────────────────────
+            '@typescript-eslint/explicit-function-return-type': [
+                'error',
+                {
+                    allowExpressions: true,
+                    allowTypedFunctionExpressions: true,
+                    allowHigherOrderFunctions: true,
+                    allowDirectConstAssertionInArrowFunctions: true,
+                },
+            ],
+            '@typescript-eslint/explicit-member-accessibility': [
+                'error',
+                { accessibility: 'no-public' },
+            ],
+            '@typescript-eslint/member-delimiter-style': 'error',
+            '@typescript-eslint/member-ordering': 'error',
+            '@typescript-eslint/no-base-to-string': 'warn',
+            // stylistic enables no-inferrable-types with default options (ignoreParameters: false);
+            // override here to allow typed parameters explicitly
+            '@typescript-eslint/no-inferrable-types': [
+                'error',
+                { ignoreParameters: true },
+            ],
+            // stylistic sets no-empty-function to error; downgrade to warn
+            '@typescript-eslint/no-empty-function': 'warn',
+            '@typescript-eslint/prefer-includes': 'warn',
+            '@typescript-eslint/return-await': ['error', 'never'],
+            '@typescript-eslint/typedef': ['error', { parameter: true }],
+            '@typescript-eslint/unified-signatures': 'error',
+            // off here — @typescript-eslint/no-shadow handles it correctly for TS
+            'no-shadow': 'off',
+            '@typescript-eslint/no-shadow': ['error', { hoist: 'all' }],
+            '@typescript-eslint/no-unused-vars': [
+                'error',
+                {
+                    varsIgnorePattern: '^_',
+                    argsIgnorePattern: '^_',
+                    caughtErrorsIgnorePattern: '^_',
+                },
+            ],
+
+            // ── eslint core ──────────────────────────────────────────────────
+            'arrow-body-style': 'error',
+            'arrow-parens': ['error', 'as-needed'],
+            curly: 'error',
+            eqeqeq: ['error', 'always'],
+            'guard-for-in': 'error',
+            'no-bitwise': 'error',
+            'no-caller': 'error',
+            'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
+            'no-eval': 'error',
+            'no-extra-boolean-cast': 'off',
+            'no-multiple-empty-lines': 'error',
+            'no-new-wrappers': 'error',
+            'no-restricted-imports': [
+                'error',
+                { paths: ['rxjs/Rx', 'primeng/primeng', 'primeng'] },
+            ],
+            'no-return-assign': 'error',
+            'no-throw-literal': 'error',
+            'no-undef-init': 'error',
+            'no-useless-concat': 'error',
+            'object-shorthand': ['error', 'always', { avoidQuotes: true }],
+            'one-var': ['error', 'never'],
+            'prefer-arrow-callback': 'error',
+            'prefer-template': 'error',
+            radix: 'error',
+
+            // ── rxjs ─────────────────────────────────────────────────────────
+            'rxjs/no-implicit-any-catch': ['error', { allowExplicitAny: true }],
+            'rxjs/no-sharereplay': 'off',
+
+            // ── import-x ─────────────────────────────────────────────────────
+            'import-x/no-cycle': [
+                'warn',
+                { maxDepth: 3, ignoreExternal: true },
+            ],
+            'import-x/no-deprecated': 'warn',
+            'import-x/first': 'error',
+            'import-x/newline-after-import': 'error',
+            'import-x/no-duplicates': 'error',
+
+            // ── simple-import-sort ───────────────────────────────────────────
+            'simple-import-sort/imports': 'error',
+            'simple-import-sort/exports': 'error',
+        },
+    },
+
+    // ─── HTML templates ────────────────────────────────────────────────────────
+    {
+        files: ['**/*.html'],
+        extends: [
+            ...angular.configs.templateRecommended,
+            ...angular.configs.templateAccessibility,
+        ],
+        rules: {
+            '@angular-eslint/template/no-negated-async': 'off',
+            '@angular-eslint/template/button-has-type': 'error',
+        },
+    },
+
+    // ─── Prettier (must be last — disables formatting rules) ───────────────────
+    prettier,
+);
+```
+
+#### Delete `typing.d.ts`
+
+In `front/src/`, remove the file `typing.d.ts` if it is still there.
+
+#### Update your tsconfig\*.json files
+
+- Replace your `tsconfig.json` content with:
+
+```json
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "outDir": "./dist/out-tsc",
+        "noImplicitOverride": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "declaration": false,
+        "experimentalDecorators": true,
+        "useDefineForClassFields": false,
+        "moduleResolution": "bundler",
+        "importHelpers": true,
+        "isolatedModules": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "paths": {
+            "@dsivd/prestations-ng": ["./node_modules/@dsivd/prestations-ng"]
+        }
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true,
+        "strictStandalone": true
+    },
+    "files": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
+```
+
+- Replace your `tsconfig.app.json` content with:
+
+```json
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts"]
+}
+```
+
+- Update your package.json, add the following script to run eslint:
+
+```diff
+"scripts": {
+-   "lint": "ng lint",
++   "lint": "ng lint --fix=true",
++   "format:prettier": "prettier --config ./.prettierrc --write \"{,!(.scannerwork|target|coverage|node_modules|.angular)/**/}*{.ts,.js,.jsx,.json,.css,.scss,.md,.html}\"",
+}
+```
+
+### Husky pre-commit hook
+
+```bash
+npm install --save-dev husky lint-staged
+npx husky init
+echo "cd front" > .husky/pre-commit
+echo "npx lint-staged" >> .husky/pre-commit
+chmod +x .husky/pre-commit
+mv ./.husky ../.husky
+git add -A
+```
+
+- You can manually run formating commands as well:
+
+```bash
+npm run format:prettier
+npm run lint
+```
+
+Fix your `meta.service.ts` but replacing:
+
+Before:
+
+```ts
+export const metaServiceFactory =
+    (metaService: MetaService): Function =>
+    () =>
+        lastValueFrom(metaService.load());
+
+export const META_SERVICE_PROVIDER = provideAppInitializer(() => {
+    const initializerFn = metaServiceFactory(inject(MetaService));
+    return initializerFn();
+});
+```
+
+After:
+
+```ts
+export const META_SERVICE_PROVIDER = provideAppInitializer(() => {
+    const metaService = inject(MetaService);
+    return lastValueFrom(metaService.load());
+});
+```
+
+Run again until no more errors:
+
+```bash
+npm run lint
+```
+
+Then:
+
+```bash
+npm run format:prettier
+```
+
+### Browsers list update
+
+Run update schematic:
+
+```bash
+ng g @dsivd/prestations-ng:replace-browsers-list
+```
+
+### Remove deprecated packages
+
+```bash
+npm uninstall @angular/platform-browser-dynamic
+npm uninstall @angular/animations
+```
+
+### Configure IntelliJ IDEA to use ESLint and Prettier on save
+
+- To configure ESLint automatically in the current project, open "_File -> Settings..._" (`Ctrl+Alt+S`) and either:
+    - Search for `ESLint` and check radio box "_Automatic ESLint configuration_" and check checkbox "_Run eslint --fix on save_"
+    - Search for `Prettier` and check radio box "_Automatic Prettier configuration_" and check checkbox "_Run on save_"
+
+### Language deprecations
+
+When using `IntelliJ`, you can run code inspection on your project to fix deprecations manually. Two ways:
+
+- IntelliJ window menu, go to: `Code > Analyze code > Run inspection by name...` (or **Ctrl+Alt+Maj+i**) and type `Deprecated symbol used`.
+- Or select your project in your project panel and `right click` on it then `Analyze > Run inspection by name...` (or **Ctrl+Alt+Maj+i**) and type `Deprecated symbol used`.
+
+### Last but not least, check if your application is working!!!
+
+#### Be sure your application gets a fresh start
+
+```bash
+rm -rf .angular/
+rm -rf node_modules/
+npm install
+```
+
+#### Build and launch your application
+
+**NB: You will most probably need to fix some compilation errors such as adding `override` when needed**
+
+```bash
+npm run build
+npm start
+```
+
+You're good if no errors are remaining!
+Finally check if your tests run well :
+
+```bash
+npm run test
+```
+
+> 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8 and check again your application**