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

package/CHANGELOG.md

@@ -22,6 +22,23 @@
 - [HasCustomErrors](projects/prestations-ng/src/has-custom-errors.ts)
     - Added `HasCustomErrors` interface representing a component that has custom error messages
 
+- [foehn-header.component.html](projects/prestations-ng/src/foehn-header/foehn-header.component.html)
+    - Added a few more ids
+
+### Updated
+
+- [foehn-footer.component.ts](projects/prestations-ng/src/foehn-footer/foehn-footer.component.ts)
+    - Updated default guide link URL
+
+- [foehn-input.component.ts](projects/prestations-ng/src/foehn-input/foehn-input.component.ts)
+    - `[name]` attribut is required
+    - `[model]` attribut is required
+
+### Deleted
+
+- [foehn-list-summary.component.ts](projects/prestations-ng/src/foehn-menu-prestation/foehn-list-summary/foehn-list-summary.component.ts)
+    - `[list]` attribut has been removed. Use `[model]` instead.
+
 ## [18.3.12]
 
 ### Updated

package/CONTRIBUTING.md

@@ -2,19 +2,10 @@
 
 ## Prerequisite
 
-- Node 20.11+
+- Node 22.18+
 - npm 10.2+
 - Chrome or Chromium
 - G++
-- The variable `CHROMIUM_BIN` set in your environment
-
-If you're using bashrc.dev.pee, the variable `CHROMIUM_BIN` is already set to `~/slave-apps/chromium-headless-64/chrome`
-
-If not, you can set the variable in your `.bashrc` or `.zshrc`:
-
-```bash
-export CHROMIUM_BIN=/usr/bin/google-chrome-stable
-```
 
 ## Developing using the Dev Tool
 
@@ -28,13 +19,13 @@ in both the Dev Tool and the library reload the page.
 ## Testing the library in integration
 
 Since version `8`, we can't use native symlink to integrate `prestations-ng` to
-a prestation such as Skeleton. We can however use `yarn link` to achieve the same
+a prestation such as Skeleton. We can however use `npm link` to achieve the same
 result.
 
 ### In **prestations-ng**
 
 - if it is the first time, execute `npm install` then `npm run build:lib` (at root level)
-- `cd dist/prestations-ng && yarn link` (it's critical to link the content of `dist/prestations-ng`, not the root)
+- `cd dist/prestations-ng && npm link` (it's critical to link the content of `dist/prestations-ng`, not the root)
 - `cd ../.. && npm run build:lib:dev` (at root level)
 
 `build:lib:dev` will use a feature of the Angular CLI: `--watch`. For more information on `--watch`, refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/create-library.md#why-do-i-need-to-build-the-library-everytime-i-make-changes).
@@ -42,12 +33,12 @@ result.
 ### In the prestation
 
 - `cd front`
-- `yarn link @dsivd/prestations-ng`
+- `npm link @dsivd/prestations-ng`
 - `npm start` (only when `npm run build:lib:dev` in `prestations-ng` has started)
 
 Now if you change something in `prestations-ng`, the CLI of the prestation will hot swap the missing pieces and reload the page.
 
-Finally, when you're done, run `yarn unlink @dsivd/prestations-ng` to unlink the local version. You will need to run `npm install --force` to re-install the package that was linked.
+Finally, when you're done, run `npm install` to unlink the local version.
 
 **NB: When the project uses a version 12+ or 13+ of the library, you need to use `yarn start:symlink` and checkout the library tag matching v12+ or v13+. More information on [UPGRADING_V12](UPGRADING_V12.md)**
 
@@ -73,12 +64,12 @@ run `npm run test:schematics` (at root level).
 
 - **In prestations-ng**:
     - if it is the first time, execute `npm install` then `npm run build:lib` (at root level)
-    - `cd dist/prestations-ng && yarn link` (it's critical to link the content of `dist/prestations-ng`, not the root)
-    - `npm run build:lib:dev` (at root level)
+    - `cd dist/prestations-ng && npm link` (it's critical to link the content of `dist/prestations-ng`, not the root)
+    - `cd ../.. && npm run build:lib:dev` (at root level)
 
 - **In project**:
     - `cd front`
-    - `yarn link @dsivd/prestations-ng` (`yarn unlink @dsivd/prestations-ng` to remove link)
+    - `npm link @dsivd/prestations-ng` (`npm install` to remove link)
     - `ng g @dsivd/prestations-ng:[YOUR_SCHEMATIC]` (i.e. `ng g @dsivd/prestations-ng:ng-add` or `ng g @dsivd/prestations-ng:update-karma-config` or `ng g @dsivd/prestations-ng:replace-browsers-list`)
 
 In your project, you can test any schematic added into [collection.json](projects/prestations-ng/schematics/collection.json).

package/UPGRADING_V19.md

@@ -330,7 +330,7 @@ ng update ngx-matomo-client@9
 
 ### Quick fix
 
-In all custom components extending `FoehnInputComponent`, in `providers` providing `FoehnInputComponent` remove `multi: true,`
+- In all custom components extending `FoehnInputComponent`, in `providers` providing `FoehnInputComponent` remove `multi: true,`.
 
 ```diff
 {
@@ -340,9 +340,11 @@ In all custom components extending `FoehnInputComponent`, in `providers` providi
 }
 ```
 
-In your `.eslintrc.json`, remove `"/src/main.ts",` from `ignorePatterns`
+- In your `.eslintrc.json`, remove `"/src/main.ts",` from `ignorePatterns`.
 
-In `main.ts`, replace `platformBrowserDynamic` by `platformBrowser`
+- In `main.ts`, replace `platformBrowserDynamic` by `platformBrowser`.
+
+- When using `<foehn-list-summary` component, replace `list` by `model`.
 
 ### Now fix your project before continuing
 
@@ -426,6 +428,8 @@ ng generate @angular/core:self-closing-tag
 
 **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.**
+
 ```bash
 npm run build
 ```
@@ -472,13 +476,13 @@ It should look like that:
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    imports: [
--       // eslint-disable-next-line @angular-eslint/prefer-standalone
--       standalone: false
+-   // eslint-disable-next-line @angular-eslint/prefer-standalone
+-   standalone: false
++   imports: [
 +       RouterOutlet,
 +       NgHttpLoaderComponent,
 +       RedirectComponent,
-    ]
++   ]
 })
 ```
 
@@ -525,6 +529,67 @@ 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.
 
+#### 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 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.
+
+> This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone.
+
+```bash
+ng generate @angular/core:route-lazy-loading
+```
+
+Here is a example when doing it manually because schematic above does not work as intended:
+
+Your `app.routing.ts` file should look something like this:
+
+```ts
+const routes: Routes = [
+    {
+        path: '',
+        component: PageWrapperComponent,
+        data: { root: true },
+        children: [
+            {
+                path: 'demandes',
+                loadChildren: () =>
+                    import('./modules/demandes/demandes.module').then(
+                        (m) => m.DemandesModule,
+                    ),
+            },
+            { path: '404', component: FoehnNotfoundComponent },
+            { path: '', redirectTo: 'demandes', pathMatch: 'full' },
+            { path: '**', redirectTo: '/404', pathMatch: 'full' },
+        ],
+    },
+];
+```
+
+Now, navigate to `DemandesModule`, at the same file level as `demandes.module.ts`, you create a `demandes.routes.ts` file with the following content:
+
+```ts
+export const demandes_routes: Routes = [
+    // Your routes found in demandes.module.ts go here
+];
+```
+
+Then replace `loadChildren: () => import('./modules/demandes/demandes.module').then(m => m.DemandesModule)` by `loadChildren: () => import('./modules/demandes/demandes.routes').then(m => m.demandes_routes)`.
+
+Now you can safely delete `demandes.module.ts` as all components are `standalone` now.
+
+---
+
+You can `lazy-load` components as well, for example:
+
+```diff
+export const demandes_routes: Routes = [
+-   { path: 'list', component: DemandeListPageComponent },
++   { path: 'list', loadComponent: () => import('./demande-list-page/demande-list-page.component').then(m => m.DemandeListPageComponent) },
+];
+```
+
 ### 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.**
@@ -1314,3 +1379,20 @@ npm run test
 ```
 
 > 🚨 **Read carefully following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8 and check again your application**
+
+### Release your application using `jenkins-libs`
+
+When your code has been merged/rebased onto `master`, you need to update your application in `jenkins-libs` to use node 22 instead of node 20.
+
+See [getImtPortailApplications](https://dsigit.etat-de-vaud.ch/outils/git/projects/PEE/repos/jenkins-libs/browse/vars/getImtPortailApplications.groovy)
+
+```diff
+[
+        'project': 'cybersdk',
+        'name'   : 'skeleton',
+        'gitUrl' : 'ssh://git@bitbucket.etat-de-vaud.ch/cybsdk/skeleton.git',
+        'jdk'    : '21',
+-       'node'   : '20'
++       'node'   : '22'
+],
+```