search

IGNF / geoportal-extensions

French Geoportal Extensions for well-known javascript mapping libraries (Leaflet and OpenLayers)
https://ignf.github.io/geoportal-extensions/
Other
64 stars 33 forks source link

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

Closed cfeltz34 closed 1 month ago

cfeltz34 commented 1 year ago

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 commented 1 year ago

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

theodury commented 10 months ago

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

I could help if need it . @lowzonenose

lowzonenose commented 3 months ago

cf. solution sur le ticket #371

elias75015 commented 1 month ago

Voir #371