IGNF / geoportal-sdk

French Geoportal SDK Javascript
Other
31 stars 13 forks source link

Angular 17 issue -CSS Files Error: Module parse failed: Unexpected token #110

Closed HerveDrezet closed 1 week ago

HerveDrezet commented 2 weeks ago

Utilisation du framework Angular : Impossible d'executer ng serve ou ng build. Tous les fichiers CSS de la bibliothèque génèrent l'erreur ./node_modules/@ignf-geoportal/sdk-2d/src/OpenLayers/CSS/OlMap.css:4:0 - Error: Module parse failed: Unexpected token (4:0) 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
| CSS spécifiques pour l'affichage dans le SDK. | /

.ol-overviewmap { | bottom: 2.5em; | left: 0.5em;

Votre environnement

Windows 11 VSCode

Angular 17

package.json { "name": "ign-test", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^17.3.0", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@ignf-geoportal/sdk-2d": "^3.5.4", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.0", "@angular/cli": "^17.3.0", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.4.2" } }

angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ignTest": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss", "standalone": false }, "@schematics/angular:directive": { "standalone": false }, "@schematics/angular:pipe": { "standalone": false } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/ign-test", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "ignTest:build:production" }, "development": { "buildTarget": "ignTest:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "ignTest:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] } } } } } }

Type d'issue

[x ] Report de bug [ ] Requête d'une nouvelle fonctionnalité

Contexte

Pour les bugs : Etapes à suivre pour le reproduire

ng serve

Comportement actuel

./node_modules/@ignf-geoportal/sdk-2d/src/OpenLayers/CSS/OlMap.css:4:0 - Error: Module parse failed: Unexpected token (4:0) 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 | CSS spécifiques pour l'affichage dans le SDK. | /

.ol-overviewmap { | bottom: 2.5em; | left: 0.5em;

./node_modules/geoportal-extensions-openlayers/src/Common/CSS/GPboostRelief.css:3:24 - Error: Module parse failed: Unexpected token (3:24) 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 / BOOST RELIEF /

div[id^=GPboostRelief-] { | font-size: 11px; | width: 150px; .... sur tous les CSS

Possible Cause/Correction/Solution technique (facultatif)

plusieurs tests réalisés

HerveDrezet commented 1 week ago

erreur dans l'import du module, sorry. Dans test.ts : bug avec import as Gp from "@ignf-geoportal/sdk-2d"; corrigé avec import as Gp from "@ignf-geoportal/sdk-2d/dist/GpSDK2D.js";