Themes and python grammers aren't loading

[FadyGeo]

I'm trying to integrate the languageclient into my angular project and connect it to a language server. I'm facing this problem currently and can't tell whether i'm using the wrong Webpack configuration or is it a common bug.

webpack: `const { dirname, resolve } = require('path');

const config = { module: { rules: [ { test: /.css$/, use: ['style-loader', 'css-loader'], include: [ resolve(__dirname, './node_modules/monaco-editor'), resolve(__dirname, './node_modules/vscode') ] }, { test: /.(mp3|wasm|ttf)$/i, type: 'asset/resource' } ], parser: { javascript: { url: true } } }, resolve: { extensions: ['.ts', '.js', '.json', '.ttf'] } };

module.exports = config; ` does anyone have an idea on how to solve it?

regards

[CGNonofr]

Are you using Vite in dev mode?

[FadyGeo]

@CGNonofr no I'm using only custom-webpack. No Vite

[CGNonofr]

Sorry, I've read a little too fast! That's a common Vite issue. Are you up to date with webpack/monaco-languageclient/monaco-vscode-api?

[kaisalmen]

Hi @FadyGeo have you compared you setup with our angular verification example already?

[FadyGeo]

@CGNonofr thanks for your response. I'm currently using: "npm:@codingame/monaco-vscode-editor-api@~3.2.2" as monaco-editor in my Package.json.

[FadyGeo]

@kaisalmen Hi, Thanks for your answer, I've merged your Angular.json with mine, used almost the same webpack as yours and my tsconfig looks similar to yours, except our project is using ES2022 Module. I've included the relevant files.

angular.json package.json tsconfig.json

the user config looks like this: code-editor-config.service.ts.json

thanks and best regards

[kaisalmen]

@FadyGeo can you share a repository with a reproducible example?

[FadyGeo]

@kaisalmen Kindly review this repository with simplified example: https://github.com/FadyGeo/LSP-POC

[kaisalmen]

@FadyGeo in your repo you are mixing major versions of the @codingame package. That is a problem. Also you have to ensure that the npm packages from this repo match the compatibility table. If you define the dependencies as such it works:

"dependencies": {
  "@angular/animations": "^15.2.0",
  "@angular/cdk": "^15.2.9",
  "@angular/common": "^15.2.0",
  "@angular/compiler": "^15.2.0",
  "@angular/core": "^15.2.0",
  "@angular/forms": "^15.2.0",
  "@angular/material": "^15.2.9",
  "@angular/platform-browser": "^15.2.0",
  "@angular/platform-browser-dynamic": "^15.2.0",
  "@angular/router": "^15.2.0",
  "@codingame/monaco-vscode-api": "~3.2.3",
  "@codingame/monaco-vscode-languages-service-override": "~3.2.3",
  "@codingame/monaco-vscode-model-service-override": "~3.2.3",
  "@codingame/monaco-vscode-python-default-extension": "~3.2.3",
  "@compodoc/compodoc": "^1.1.19",
  "@tinymce/tinymce-angular": "^7.0.0",
  "@types/markdown-it": "^13.0.6",
  "@types/markdown-it-footnote": "^3.0.3",
  "@types/marked": "^4.0.7",
  "canvas-confetti": "^1.9.2",
  "elkjs": "^0.8.2",
  "file-saver": "^2.0.5",
  "highlight.js": "^11.9.0",
  "jszip": "^3.10.1",
  "jwt-decode": "^3.1.2",
  "markdown-it": "^13.0.2",
  "markdown-it-footnote": "^3.0.3",
  "markdown-it-highlightjs": "^4.0.1",
  "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~3.2.3",
  "monaco-editor-wrapper": "~4.0.2",
  "monaco-languageclient-examples": "~8.1.1",
  "ngx-extended-pdf-viewer": "^18.0.0-beta.6",
  "ngx-markdown": "^15.1.2",
  "ngx-toastr": "^15.2.2",
  "prismjs": "^1.29.0",
  "reflect-metadata": "^0.1.13",
  "rxjs": "~7.8.0",
  "sprotty": "^1.0.0",
  "sprotty-elk": "^1.0.0",
  "tslib": "^2.3.0",
  "vite": "^5.2.8",
  "vscode": "npm:@codingame/monaco-vscode-api@~3.2.3",
  "vscode-languageclient": "~9.0.1",
  "web-worker": "^1.2.0",
  "zone.js": "~0.12.0"
}

Also, consider updating to the latest version. We are not maintaining the old ones...

[FadyGeo]

@kaisalmen Thank you very much for you feedback and I'll consider being more careful while integrating new packages.