Build de plusieurs js dsfr en conflit

[ebitauld]

Décrire le bug

Pour résoudre (ou diminuer) un problème de FOUC (apparition furtive sans style au chargement) dans notre application Angular, nous essayons de réduire au maximum nos bundles. Le moindre octet compte !
Pour cela, comme décrit dans votre documentation "Prise en main", au lieu d'embarquer tout le style, nous embarquons uniquement le style minimum nécessaire avec ces 3 fichiers :

"styles": [
              "./node_modules/@gouvfr/dsfr/dist/core/core.main.min.css",
              "./node_modules/@gouvfr/dsfr/dist/component/component.main.min.css",
              "./node_modules/@gouvfr/dsfr/dist/utility/utility.main.min.css"
]

De la même façon, nous avons tenté d'embarquer uniquement ces fichiers javascript :

"scripts": [
              "./node_modules/@gouvfr/dsfr/dist/core/core.module.js",
              "./node_modules/@gouvfr/dsfr/dist/component/component.module.js"
]

au lieu de juste :
"scripts": ["./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"]

Mais lors de la compilation des erreurs de conflits apparaissent car les modules DSFR (core.module.js et component.module.js) contiennent chacun leur propre copie du code de base (variables config, api, ns...), ce qui crée des conflits quand Angular les concatène dans un seul bundle global.

Les étapes pour reproduire le bug

Compiler l'application Angular avec plusieurs fichiers javascript décrit plus haut.

Comportement attendu

Pas d'erreur de compilation, et réduction de la taille totale des bundles javascript.

Capture d’écran

Configuration et système utilisé

• Version du DSFR : 1.14.2
• Appareil (mobile, tablette, desktop) : desktop
• Système d’exploitation : windows
• Navigateur et version : chrome
• Framework: Angular

[7studio]

Hello @ebitauld,

Je vais essayer d'amener une début de réponse avec mon petit niveau de développement 😬

1. Avec la déclaration que tu présentes, Angular va essayer de concaténer la liste des fichiers présents dans scripts.
2. Les fichiers *.module.js du DSFR ne sont pas faits pour être concaténés car comme leur nom l'indique se sont des modules indépendants. Donc normal que config, api et ns soient présents dans les deux fichiers.
3. Angular ne semble pas vouloir implémenter l'import d'une ressource avec un type="module" : Add script config for adding scripts as type="module" angular/angular-cli#24592
4. Si j'essaye de charger les fichiers *.nomodule.js via le fichier angular.json, la compilation s'effectue correctement mais j'ai une nouvelle erreur dans la console du navigateur : ERROR TypeError: can't access property "ascend", this.element is undefined

La seule solution que j'ai trouvé pour le moment est de charger les dépendances dans le fichier app.ts :

import '@gouvfr/dsfr/dist/core/core.module.js';
import '@gouvfr/dsfr/dist/component/component.module.js';

Honnêtement je ne suis pas sûr qu'il y ait un gain significatif à procéder ainsi. Le mieux serait à minima d'importer uniquement les ressources des composants utilisés dans l'application et au mieux de charger uniquement les ressources quand les composants sont sur la page.

Je ne sais pas si tu es utilisateur du portage Angular mais c'est ma plus grande frustration : https://gitlab.mim-libre.fr/men/transverse/dsmen/ngx-dsfr-components/-/issues/83