Compilation sur Angular 14 qui ne marche pas (aucun problème avec Angular 13)

[cfeltz34]

L'extension ne fonctionne pas avec Angular 14 (aucun problème avec Angular 13).

Votre environnement

"@angular/cli": "^14.2.10",
"geoportal-extensions-leaflet": "^2.2.9",
"leaflet": "1.9.3",

Type d'issue

[x] Report de bug

Contexte

Suite à la mise à jour de mon projet de Angular 13 à Angular 14 je reçois des erreurs de ce type à la compilation (ng build) :

./node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPdrawing.css:5:29 - Error: Module parse failed: Unexpected token (5:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* Showing/hiding drawing panel */
| 
> label[id^=GPshowDrawingPicto-] {
|   display: inline-block;
| }

Pour les bugs : Etapes à suivre pour le reproduire

Il suffit de créer un projet Angular 14 et d'y ajouter votre librairie. L'erreur se produit à la compilation du projet.

Comportement attendu

Pas d'erreur à la compilation

Possible Cause/Correction/Solution technique (facultatif)

Ce problème est du à un changement de fonctionnement d'Angular qui a été répertorié sur d'autres bibliothèques comme on peut le voir sur le lien suivant : https://stackoverflow.com/questions/73036024/css-module-parse-failed-unexpected-token-angular-14
C'est considéré comme normal et volontaire par les concepteurs d'Angular suite à un "breaking change" volontaire, à savoir :

We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI.

Workaround

En attendant une correction, on peut ignorer les fichiers css dans la compilation en les ajoutant manuellement dans la section
projects/{projectname}/architect/build/styles du fichier angular.json

              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPboostRelief.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPdrawing.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPelevationPath.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPgetFeatureInfo.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPisochron.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPlayerSwitcher.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPlocation.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPmeasureArea.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPmeasureAzimuth.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPmeasureLength.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPmeasureToolTip.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPreverseGeocoding.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GProute.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPsearchEngine.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPwaiting.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/Isochrone/GPisochronLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/LayerSwitcher/GPlayerSwitcherLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/LocationSelector/GPlocationLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/ReverseGeocoding/GPreverseGeocodingLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/Route/GProuteLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/GPgeneralWidgetLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPgeneralWidget.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Common/CSS/GPmousePosition.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/ElevationPath/GPelevationPathLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/MousePosition/GPmousePositionLeaflet.css", "inject": false },
              { "input": "node_modules/geoportal-extensions-leaflet/src/Leaflet/CSS/Controls/SearchEngine/GPsearchEngineLeaflet.css", "inject": false },

[lowzonenose]

Ok, merci pour l'info.
J'ajoute le lien vers les tickets sur ce problème : Angular14 & exception sur le loader CSS sous webpack 5

• Style Imports fail after update Angular13 to 14 ag-grid/ag-grid#5381
• Angular 14 build fails when importing css in source code from node modules angular/angular-cli#23273

[theodury]

Could you fix the angular template with a more recent version of angular ?

I could help if need it . @lowzonenose

[lowzonenose]

cf. solution sur le ticket #371

[elias75015]

Voir #371