@dsivd/prestations-ng 19.0.0-beta.8 → 19.0.0

package/UPGRADING_V19.md

@@ -25,13 +25,13 @@ mvn -U org.openrewrite.maven:rewrite-maven-plugin:run -Drewrite.recipeArtifactCo
 
 #### Fixes
 
-Fix application.properties :
+Fix `application.properties`:
 
 ```diff
-# Remove the following properties if it was added by the recipe
+# Remove the following properties if they were added by the recipe
 spring.liquibase.password=${spring.datasource.password}
 spring.liquibase.username=${spring.datasource.username}
-Replace the spring.jackson.serialization.WRITE_DATES_AS_TIMESTAMPS property by spring.jackson.datatype.datetime.write-dates-as-timestamps if it was not done by the recipe
+Replace the `spring.jackson.serialization.WRITE_DATES_AS_TIMESTAMPS` property with `spring.jackson.datatype.datetime.write-dates-as-timestamps` if it was not already done by the recipe
 ```
 
 If the following plugin with Lombok path was added by the recipe, remove this plugin:
@@ -62,9 +62,9 @@ If the code uses `AutoConfigureMockMvc`, add:
 </dependency>
 ```
 
-And replace the old `AutoConfigureMockMvc` import which is not recognized anymore by the new one.
+And replace the old `AutoConfigureMockMvc` import, which is not recognized anymore, with the new one.
 
-If we use in pom.xml Spring/Hibernate dependencies (like hibernate-jpamodelgen), check the Spring Boot 4 migration
+If you use Spring/Hibernate dependencies in `pom.xml` (like `hibernate-jpamodelgen`), check the Spring Boot 4 migration
 guide to see if it has been replaced by another library: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-4.0-Migration-Guide
 
 ### Jackson migration
@@ -77,11 +77,11 @@ Replace `com.fasterxml.jackson.databind.ObjectMapper` with `tools.jackson.databi
 - `ch.vd.cyberadminbe.jms` has been moved to `ch.vd.cyber.backofficebe.jms`
 - `ch.vd.cyberadminbe.security` has been moved to `ch.vd.cyber.backofficebe.security`
 - `ch.vd.cyberadminbe.editique` has been moved to `ch.vd.cyber.backofficebe.editique`
-- `cyberadminbe.config.CyberAdminBeEsbHttpConfig` has renamed to `backofficebe.config.BoCommonEsbHttpConfig`
+- `cyberadminbe.config.CyberAdminBeEsbHttpConfig` has been renamed to `backofficebe.config.BoCommonEsbHttpConfig`
 
 ### BO : Brave Tracer
 
-If you are using Brave Tracer (search `brace.Tracer` in the code, usually in backoffices), you need to replace it with
+If you are using Brave Tracer (search `brave.Tracer` in the code, usually in backoffices), you need to replace it with
 OpenTelemetry by adding the following dependencies (already included by `ch.vd.cyber:starter-bo-jdbc-jms` and `ch.vd.cyber:starter-prestation`):
 
 ```xml
@@ -102,7 +102,8 @@ And replace `brave.Tracer` imports by `io.micrometer.tracing.Tracer`;
 
 This base class has been moved from `ch.vd.cyber.sdk:cyberadmin-be` to `ch.vd.cyber.sdk:backoffice-be`
 and renamed `EsbMessageListenerWithTracingPropagation`.
-the constructor has also been updated :
+
+The constructor has also been updated :
 
 ```java
 import ch.vd.cyberadminbe.jms.EsbMessageListenerWithSleuthIntegration;
@@ -132,7 +133,7 @@ public class MyListener extends EsbMessageListenerWithTracingPropagation {
 }
 ```
 
-finally, if you have mock issues with you integration tests, you can use `ch.vd.cyber.backofficebe.jms.JmsTestUtils.mockTracingPropagation(final Tracer tracerMock, final Propagator propagatorMock)`
+Finally, if you have mock issues with your integration tests, you can use `ch.vd.cyber.backofficebe.jms.JmsTestUtils.mockTracingPropagation(final Tracer tracerMock, final Propagator propagatorMock)`
 
 ### BO : ESB Integration
 
@@ -151,14 +152,19 @@ Run your application with this dependency :
 </dependency>
 ```
 
-Look for logs that indicate property you should migrate (watch for WARN logs of class PropertiesMigrationListener), update them and remove the dependency
+Look for logs that indicate properties you should migrate (watch for WARN logs of class PropertiesMigrationListener), update them and remove the dependency
 
 ### BO using jpa repositories
 
-As we also have jdbc in the classpath, to avoid having dozens of log like "Spring Data JDBC - Could not safely 
+As we also have jdbc in the classpath, to avoid having dozens of logs like "Spring Data JDBC - Could not safely
 identify store assignment for repository candidate interface", add the property in your application.properties :
 
-spring.data.jdbc.repositories.enabled=false
+`spring.data.jdbc.repositories.enabled=false`
+
+### BO using json payloads with primitives properties
+
+`spring.jackson.deserialization.fail-on-null-for-primitives=false`
+or update all concerned payloads to use wrapper classes instead of primitives.
 
 ### Debugging tips
 
@@ -180,20 +186,34 @@ 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.
 
+### Postfinance 9.5.0
+
+Since prestations-be 19.0.3, Postfinance dependency was updated to 9.5.0. Methods signatures and package have moved
+but it is the only change that needs to be made on your application. The rest is handled by prestations-be.
+
+You can run the renaming in your application :
+
+```bash
+grep -rl 'ch\.postfinance\.sdk' --include='*.java' . \
+  | xargs perl -pi -e 's/\bch\.postfinance\.sdk\b/ch.postfinancecheckout.sdk/g'
+```
+
 ## PRESTATIONS-NG
 
-For the commands in this guide, it is supposed that your are in the `front` folder of your project.
+For the commands in this guide, it is assumed that you 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.
+to `^21.2.14`, using `node 22+` to build, `npm 10+` as package manager, and `Foehn 2+ (Bootstrap 5+)` for our design system.
+
+There are a lot of breaking changes because our library has migrated to **standalone** components, **signals**, and the **inject function** instead of constructor injection parameters.
 
-A lot of breaking because our library has migrated to **standalone** components, **signals** and **inject function** instead of constructor injection parameters.
+> 🚨 **Read carefully the following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8**
 
-> 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8**
+> 🚨 **When working in a `multi-project` repository and `.husky` folder exists, delete `_` folder in `.husky` to be able to commit**
 
 ### Migrate to ESLint
 
-(NB : you can skip this step if you already have a `front/.eslintrc.json` file, it means it is already done.)
+💡 **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.
 
@@ -201,14 +221,12 @@ Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project
 
 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.**
+💡 **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.
+Remove your `resolutions` in `package.json` before starting: if you have `resolutions` in `package.json`, remove the section manually.
 
 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
@@ -216,33 +234,6 @@ 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`
@@ -255,7 +246,7 @@ Verify your node version in your terminal by executing:
 node -v
 ```
 
-**NB: If version is still v20+ by default, type `node22` in your terminal to switch to node v22+**
+💡 **NB: If the version is still v20+ by default, type `node22` in your terminal to switch to node v22+**
 
 ```bash
 node22
@@ -269,6 +260,37 @@ Be sure to use a node version 22+ in your terminal:
 node -v
 ```
 
+##### IntelliJ node version
+
+Change the IntelliJ Node.js version to 22+ by going to `File > Settings > Languages & Frameworks > TypeScript` and selecting a node version 22+ in `Node runtime`.
+
+#### Continue with Angular 20 migration
+
+```bash
+npm install @angular/cli@20 -g
+ng update @angular/core@20 @angular/cli@20
+```
+
+- When asked "Select the migrations that you'd like to run",
+    - accept **"use-application-builder"** by hitting "Space" key
+    - hit "Enter" key
+- When asked "Select the migrations that you'd like to run",
+    - accept **"control-flow-migration"** by hitting "Space" key
+    - hit "Down arrow" key
+    - accept **"router-current-navigation"** by hitting "Space" key
+    - hit "Enter" key
+
+🚨 **IMPORTANT: Search for every `@for` in your project and check that `track` statement is present and has a unique identifier.
+When a unique identifier such as `id` is not possible, track by object or as a last resort use `track $index`.**
+
+💡 **NB: When using `@angular/cdk` in your project**
+
+```bash
+ng update @angular/cdk@20
+```
+
+### Running with node 22+
+
 #### In your project
 
 Update your `package.json` file to specify the node engine:
@@ -300,36 +322,36 @@ buildAppPipelinePodmanUT([
 
 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.**
+💡 **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".
+- When asked again "Select the migrations that you'd like to run"
+    - accept **"router-current-navigation"** by hitting "Space" key
+    - hit "Enter" key
 
 ```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".
+- When asked "Select the migrations that you'd like to run"
+    - accept **"use-application-builder"** by hitting "Space" key
+    - hit "Enter" key
 
 ```bash
 npm install @types/node@22 ts-node@10
 ```
 
-**NB: When using `@angular/cdk` in your project**
+💡 **NB: When using `@angular/cdk` in your project**
 
 ```bash
 ng update @angular/cdk@21
 ```
 
-**NB: When using `ngx-matomo-client` in your project**
+💡 **NB: When using `ngx-matomo-client` in your project**
 
 ```bash
 ng update ngx-matomo-client@9
@@ -348,18 +370,17 @@ ng update ngx-matomo-client@9
 ```
 
 - In your `.eslintrc.json`, remove `"/src/main.ts",` from `ignorePatterns`.
-
 - In `main.ts`, replace `platformBrowserDynamic` by `platformBrowser`.
-
 - When using `<foehn-list-summary` component, replace `list` by `model`.
 
 ### 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".
+🚨 **IMPORTANT: Fix your project because our new prestations-ng v19+ is standalone, uses signals instead of observables, and uses the inject function instead of constructor injection parameters.**
 
-Check every `constructor` in your project, and remove useless `constructor` parameters that are not used anymore (like `ActivatedRoute` in components extending `AbstractPageComponent`).
+- Only keep `modules` related to your application, such as `AppRoutingModule`.
+- Remove all other imports of **modules** and make sure you are using the new **standalone components** by adding them directly from your template (Alt+Enter).
+- Add `providePrestationsNgCore(),` to the `providers` array of your `app.module.ts` file.
+- Check every `constructor` in your project and remove unused `constructor` parameters (like `ActivatedRoute` in components extending `AbstractPageComponent`).
 
 Run the following command until you have no more errors.
 
@@ -367,7 +388,7 @@ Run the following command until you have no more errors.
 npm run build
 ```
 
-**TIP: If your IntelliJ is still showing you errors on `@if` or `@for`, close it and re-open it to fix.**
+💡 **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
 
@@ -385,11 +406,13 @@ ng generate @angular/core:inject
 ✔ 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.
+Then:
+
+- Go through every file that has changed and fix what is broken.
+- Reorder public / private and remove unused imports so ESLINT is happy again.
 
-Reorder public / private and remove unused imports so ESLINT is happy again.
+Little example of cleaning when extending `AbstractPageComponent`:
 
-For example, when extending `AbstractPageComponent`:
 Before:
 
 ```ts
@@ -417,7 +440,7 @@ Most of the time, you can remove `activatedRoute` because it was used as a const
 
 ### 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.**
+🚨 **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
@@ -433,9 +456,9 @@ ng generate @angular/core:self-closing-tag
 
 ### Migrate to standalone
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
-**TIP: Check [Migrating from NgModules](COMPONENTS.md#migrating_from_ngmodules) for more information before running following commands.**
+💡 **TIP: Check [Migrating from NgModules](COMPONENTS.md#migrating_from_ngmodules) for more information before running the following commands.**
 
 ```bash
 npm run build
@@ -534,11 +557,11 @@ bootstrapApplication(AppComponent, appConfig).catch((err) =>
 );
 ```
 
-Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if it has not already been done.
+Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if they have not already been removed.
 
 #### Migration to lazy-loaded routes when working with large applications
 
-You may have some other modules that are maybe lazy-loaded. Just be sure that all your components are standalone before continuing.
+You may have some other modules that are lazy-loaded. Just be sure that all your components are standalone before continuing.
 
 > You can run the following command to convert eagerly loaded component routes to lazy loaded routes. This allows the build process to split the production bundle into smaller chunks, to avoid a big JS bundle that includes all routes, which negatively affects initial page load of an application.
 
@@ -548,7 +571,7 @@ You may have some other modules that are maybe lazy-loaded. Just be sure that al
 ng generate @angular/core:route-lazy-loading
 ```
 
-Here is a example when doing it manually because schematic above does not work as intended:
+Here is an example when doing it manually because schematic above does not work as intended:
 
 Your `app.routing.ts` file should look something like this:
 
@@ -599,7 +622,7 @@ export const demandes_routes: Routes = [
 
 ### 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.**
+🚨 **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
@@ -615,9 +638,8 @@ ng generate @angular/core:ngclass-to-class
 
 ✔ 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.
+- 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.**
 
@@ -667,7 +689,7 @@ After:
 
 ### 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.**
+🚨 **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
@@ -683,13 +705,12 @@ ng generate @angular/core:ngstyle-to-style
 
 ✔ 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.
+- 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.**
+🚨 **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
@@ -703,7 +724,7 @@ 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.
+- Check every file that has changed and fix what is broken.
 
 ### Migrate @HostListener
 
@@ -746,7 +767,7 @@ export class NumberCurrencyFormatterDirective implements OnInit {
 
 ### 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.**
+🚨 **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
@@ -762,15 +783,13 @@ ng generate @angular/core:signal-queries-migration --insert-todos
 
 ✔ 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.
+- 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.**
+🚨 **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
@@ -792,7 +811,7 @@ When needing to subscribe to an output, you can use `outputToObservable` from `@
 
 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.**
+🚨 **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
@@ -808,11 +827,9 @@ ng generate @angular/core:signal-input-migration --insert-todos
 
 ✔ 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.
+- 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
 
@@ -884,10 +901,10 @@ 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.
+- search for `karma.conf.js` in your project and remove all references to it.
+- 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:
+Then run the following command to migrate from jasmine to vitest:
 
 ```bash
 ng g @schematics/angular:refactor-jasmine-vitest
@@ -976,6 +993,28 @@ describe('AppComponent', () => {
 });
 ```
 
+#### Running fakeAsync tests using spyOnProperty with Vitest
+
+Example of transformation:
+
+```diff
+beforeEach(() => {
+-   spyOnProperty(sessionInfo, 'data').and.returnValue(of(sessionInfoData));
++   vi.spyOn(sessionInfo, 'data', 'get').mockReturnValue(of(sessionInfoData));
+});
+
+- it('should properly map the initial data', fakeAsync(() => {
++ it('should properly map the initial data', async () => {
+    const form = new MenuOrderForm();
+-   service.enrichWithSessionInfoData(form);
+-   tick(200);
++   await firstValueFrom(service.enrichWithSessionInfoData(form));
+
+    // expect(...) here
+- }));
++ });
+```
+
 ### Migrate to eslint flat configuration
 
 ```bash
@@ -1031,9 +1070,8 @@ Remove your old `.eslintrc.json` file in your `front` folder:
 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:
+- search for `.eslintrc.json` in your project and remove them.
+- add a new `eslint.config.mjs` file with the following content:
 
 ```ts
 // @ts-check
@@ -1201,9 +1239,9 @@ export default tseslint.config(
 );
 ```
 
-#### Delete `typing.d.ts`
+#### Delete `typings.d.ts`
 
-In `front/src/`, remove the file `typing.d.ts` if it is still there.
+In `front/src/`, remove the file `typings.d.ts` if it is still there.
 
 #### Update your tsconfig\*.json files
 
@@ -1277,6 +1315,8 @@ In `front/src/`, remove the file `typing.d.ts` if it is still there.
 
 ### Husky pre-commit hook
 
+💡 **Tip: For multi-projects, see section below `Husky pre-commit hook for multi-project repository`**
+
 ```bash
 npm install --save-dev husky lint-staged
 npx husky init
@@ -1287,14 +1327,95 @@ mv ./.husky ../.husky
 git add -A
 ```
 
-- You can manually run formating commands as well:
+- In your `package.json`, modify `prepare` script to run husky from the parent folder:
+
+```diff
+- "prepare": "husky"
++ "prepare": "cd .. && husky"
+```
+
+Then run:
+
+```bash
+npm install
+```
+
+You should see in your project root folder `.husky` a new folder `_`.
+
+#### Husky pre-commit hook for multi-project repository
+
+💡 **Tip: Skip this part if you are not in a multi-project repository and follow section `Husky pre-commit hook`**
+🚨 **WARNING: You need to repeat this section for every "child" project**
+
+```bash
+npm install --save-dev husky lint-staged
+npx husky init
+chmod +x .husky/pre-commit
+```
+
+---
+
+🚨 **WARNING: To be done in your "child" project folder only when migrating your first project. For other projects, you can skip this step and remove the `.husky` folder in your "child" project folder.**
+
+```bash
+mv ./.husky ../../.husky
+git add -A
+```
+
+Replace `.husky/pre-commit` content with the following:
+
+```bash
+projects=$(git diff --cached --name-only --diff-filter=ACMR | awk -F'/' '{print $1}' | sort -u)
+
+for project in $projects; do
+  if [ -d "$project/front" ]; then
+    echo "➡️  lint-staged pour $project/front"
+    (cd "$project/front" && npx lint-staged) || exit 1
+  fi
+done
+```
+
+---
+
+Now continue adapting your `package.json` and modify `prepare` script to run husky from the parent folder:
+
+```diff
+- "prepare": "husky"
++ "prepare": "cd ../.. && husky"
+```
+
+Then run:
+
+```bash
+npm install
+```
+
+You should see in your project root folder `.husky` a new folder `_`.
+
+#### lint-staged
+
+In your `package.json` file, check for existing `lint-staged` section and add/modify with the following content. If it does not exist, create it:
+
+```json
+"lint-staged": {
+    "*.ts": [
+        "eslint --fix",
+        "prettier --config ./.prettierrc --write"
+    ],
+    "*.{js,jsx,json,css,scss,md,html}": [
+        "prettier --config ./.prettierrc --write"
+    ]
+},
+```
+
+#### Manually run formatting commands
 
 ```bash
 npm run format:prettier
 npm run lint
 ```
 
-Fix your `meta.service.ts` but replacing:
+Fix your `meta.service.ts` by replacing:
 
 Before:
 
@@ -1346,6 +1467,15 @@ npm uninstall @angular/platform-browser-dynamic
 npm uninstall @angular/animations
 ```
 
+### Add missing `^` or `~` in `package.json` devDependencies
+
+Check you devDependencies in your `package.json` file and add `^` in front of every version number if missing excepted for `typescript` where you should add `~`. Then run:
+
+```bash
+npm install
+npm update
+```
+
 ### 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:
@@ -1371,7 +1501,7 @@ npm install
 
 #### Build and launch your application
 
-**NB: You will most probably need to fix some compilation errors such as adding `override` when needed**
+💡 **NB: You will most probably need to fix some compilation errors such as adding `override` when needed**
 
 ```bash
 npm run build
@@ -1385,7 +1515,7 @@ Finally check if your tests run well :
 npm run test
 ```
 
-> 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8 and check again your application**
+> 🚨 **Read carefully the following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8 and check again your application**
 
 ### Release your application using `jenkins-libs`