Runtime error when consuming Angular + Vite component library wrapping monaco-languageclient in an Nx workspace

[vishnuvarthan-balasubramaniam]

Hello Team,

I'm working on integrating monaco-languageclient into an Angular application, but I've run into a persistent issue when trying to consume it as a packaged library.

Context & Setup
I am build a reusable component library in Angular that wtaps the Monaco Editor and LSP functionality.
The component library is built with Vite & Rollup options and its been consumed by the Angular build system (esbuild/webpack)

• Component library builder: Vite with Rollup options in Nx workspace.
• Consumer application: An Nx Angular application using the standard Angular build system.
• Version: monaco-languageclient v10.7.0, angular 20.3.16

The Issue
The component library itself builds successfully. However, when I try to consume this compiled component in my main Nx application, I encounter the following error in the browser console while running the application and editor is not rendered:

What I've Tried
I've experimented with multiple approaches to resolve this, including:

• Fine-tuning the Vite and Rollup configurations with the component library to handle the monaco-languageclient dependencies.
• Adjusting the builder and compiler options on the consuming applications side.

Despite these efforts, I haven't been able to bypass the error. I suspect there might be a deviation in how I'm building the dependencies via Rollup or how I'm consuming the component or an incompatibility when the standard Angular build system tried to parse the Vite-built library.

Codes & Attachments
To help identify where things might be going wrong, I've attached my key configuration files:

lib/monaco-editor/vite.config.mts

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import * as path from 'path';
import { fileURLToPath } from 'url';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
import angular from '@analogjs/vite-plugin-angular';
import importMetaUrlPlugin from '@codingame/esbuild-import-meta-url-plugin';

const pkgDir = path.dirname(fileURLToPath(import.meta.url));
const tsconfigPath = path.resolve(pkgDir, 'tsconfig.lib.json');
const entryPath = path.resolve(pkgDir, 'src/index.ts');
const entryRoot = path.resolve(pkgDir, 'src');
const outDir = path.resolve(pkgDir, '../../dist/packages/ngx-monaco-editor');

export default defineConfig(() => ({
  root: pkgDir,
  resolve: {
    dedupe: [
      'vscode',
      'monaco-editor',
      '@codingame/monaco-vscode-api',
      '@codingame/monaco-vscode-editor-api',
      '@codingame/monaco-vscode-view-common-service-override',
    ],
  },
  build: {
    outDir,
    emptyOutDir: true,
    assetsInlineLimit: 0,
    reportCompressedSize: true,
    sourcemap: false,
    target: 'esnext',
    commonjsOptions: {
      include: [/node_modules/],
      transformMixedEsModules: true,
    },
    lib: {
      entry: entryPath,
      name: 'ngx-monaco-editor',
      fileName: 'index',
      formats: ['es'],
    },
    rollupOptions: {
      external: [
        'vscode',
        'monaco-editor',
        'monaco-languageclient',
        /^@codingame\/monaco-vscode-.*/,
        /^monaco-languageclient\/.*/,
        'vscode-languageclient',
        'vscode-languageserver-protocol',
        'vscode-jsonrpc',
      ],
    },
  },
  worker: {
    format: 'es',
    plugins: () => [nxViteTsPaths()],
  },
  esbuild: {
    minifySyntax: false,
  },
  plugins: [
    angular({ tsconfig: tsconfigPath }),
    nxViteTsPaths(),
    nxCopyAssetsPlugin(['*.md']),
    dts({
      entryRoot: 'src',
      outDir,
      tsconfigPath,
      insertTypesEntry: true,
      cleanVueFileName: true,
    }),
  ],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [importMetaUrlPlugin],
    },
    exclude: [],
    include: [
      'vscode/localExtensionHost',
      'vscode-jsonrpc',
      'vscode-languageclient',
      'vscode-languageserver',
      'vscode-languageserver/browser.js',
      'vscode-languageserver-protocol',
      '@codingame/monaco-vscode-api',
      '@codingame/monaco-vscode-editor-api',
      '@codingame/monaco-vscode-view-common-service-override',
    ],
  },
}));

lib/monaco-editor/monaco-editor.component.ts
A reference taken from the verify/angular

import { type AfterViewInit, Component, input } from '@angular/core';

import * as monaco from '@codingame/monaco-vscode-editor-api';
import { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override';
import * as vscode from 'vscode';
import { LogLevel } from '@codingame/monaco-vscode-api';
import { EditorApp,  type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';

@Component({
  selector: 'monaco-editor',
  imports: [],
  templateUrl: './monaco-editor.component.html',
  styleUrl: './monaco-editor.component.scss',
})
export class MonacoEditorComponent implements AfterViewInit {
  readonly languageId = input<string>('');
  readonly serverUrl = input<string>('');

  async ngAfterViewInit(): Promise<void> {
    await runExtendedClient(this.languageId(), this.serverUrl());
  }
}

export const runExtendedClient = async (languageId: string, serverUrl: string) => {
  const basePath = '/home/mlc/packages/examples/resources/json';
  const helloCode = `{
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": {"value": "unix"}
}`;
  const helloUri = vscode.Uri.file(`${basePath}/workspace/hello.${languageId}`);
  const fileSystemProvider = new RegisteredFileSystemProvider(false);
  fileSystemProvider.registerFile(new RegisteredMemoryFile(helloUri, helloCode));
  registerFileSystemOverlay(1, fileSystemProvider);

  const htmlContainer = document.getElementById('monaco-editor-root')!;

  if (!(window as any).__vscodeApiInitialized) {
    const vscodeApiConfig: MonacoVscodeApiConfig = {
      $type: 'extended',
      viewsConfig: {
        $type: 'EditorService',
        htmlContainer,
      },
      logLevel: LogLevel.Debug,
      userConfiguration: {
        json: JSON.stringify({
          'workbench.colorTheme': 'Default Dark Modern',
          'editor.experimental.asyncTokenization': true,
        }),
      },
      monacoWorkerFactory: configureDefaultWorkerFactory,
    };

    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
    await apiWrapper.start();

    await import('@codingame/monaco-vscode-json-default-extension');

    (window as any).__vscodeApiInitialized = true;
  }

  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      modified: {
        text: helloCode,
        uri: helloUri.path,
      },
    },
  };

  const editorApp = new EditorApp(editorAppConfig);
  await editorApp.start(htmlContainer);

  if (serverUrl && serverUrl.trim() !== '') {
    const languageClientConfig: LanguageClientConfig = {
      languageId: languageId,
      connection: {
        options: {
          $type: 'WebSocketUrl',
          url: serverUrl,
        },
      },
      clientOptions: {
        documentSelector: [languageId],
        workspaceFolder: {
          index: 0,
          name: 'workspace',
          uri: vscode.Uri.parse(`${basePath}/workspace`),
        },
      },
    };

    const lcWrapper = new LanguageClientWrapper(languageClientConfig);
    await lcWrapper.start();

    await vscode.workspace.openTextDocument(helloUri);
  }
};

package.json in the library application
Added dependencies for the monaco-languageclient

"dependencies": {
    "@analogjs/vite-plugin-angular": "^2.2.3",
    "@codingame/esbuild-import-meta-url-plugin": "^1.0.3",
    "@codingame/monaco-vscode-api": "26.1.2",
    "@codingame/monaco-vscode-editor-api": "26.1.2",
    "@codingame/monaco-vscode-files-service-override": "26.1.2",
    "@codingame/monaco-vscode-json-default-extension": "26.1.2",
    "monaco-languageclient": "10.7.0",
    "vscode": "npm:@codingame/monaco-vscode-extension-api@26.1.2",
    "vscode-ws-jsonrpc": "3.5.0",
  },
"overrides": {
    "vscode": "$vscode",
    "@codingame/monaco-vscode-api": "$@codingame/monaco-vscode-api",
    "@codingame/monaco-vscode-editor-api": "$@codingame/monaco-vscode-api",
    "@codingame/monaco-vscode-extensions-service-override": "$@codingame/monaco-vscode-api",
    "@codingame/monaco-vscode-files-service-override": "$@codingame/monaco-vscode-api",
    "@codingame/monaco-vscode-configuration-service-override": "$@codingame/monaco-vscode-api",
    "@codingame/monaco-vscode-keybindings-service-override": "$@codingame/monaco-vscode-api"
  }

Has anyone successfully set a similar architecture, or can you spot where my implementation might be deviating? Any guidance or pointers would be greatly appreciated because I tried to search and identify the similar patterns in repo or any in documents or in the internet, but no luck.

Please let me know if you need any code or architecture which make sense to help see the overview clearly.

Thanks in advance for your time and help! 🙂

[kaisalmen]

Hi @vishnuvarthan-balasubramaniam is it possible to share a re-producible example in repository, so we can try it out ourselves? Thank you.

For sure with the standard angular build system our stack does not work properly. Our current work-around is to rely on @analogjs/vite-plugin-angular.

[CGNonofr]

The error is a hint that the issue is related to https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting#duplicate-versions though

[vishnuvarthan-balasubramaniam]

Looks similar, but I build the monaco-languageclient with Vite and use it in the Angular build system
Maybe I will share the re-producible example in the repository, so that you will have the more info

[vishnuvarthan-balasubramaniam]

Hi @kaisalmen

I have put together a reproducible example here: https://github.com/vishnuvarthan-balasubramaniam/monaco-languageclient-vite-angular

I reviewed the troubleshooting wiki you shared. While it provides workarounds for Webpack, I couldn't find a solution applicable to Angular's esbuild setup.

I also ran npm list @codingame/monaco-vscode-api and confirmed the duplicate versions issue mentioned in the documentation. I attempted to resolve this by forcing all related dependencies to the same version using overrides in my package.json. However, doing so causes a getUri error at runtime. Additionally, despite explicitly defining the version in overrides, npm occasionally ignores it and installs a lower version anyway.

Could you please take a look at the repository to see what might be going wrong? Let me know if you need any additional details or logs.

Thanks in advance!

[kaisalmen]

Hi @vishnuvarthan-balasubramaniam you have to use version ^25.1.2 for all @CodinGame related packages. monaco-languageclient is tied to a major version of the @CodinGame packages, please see this table:
https://github.com/TypeFox/monaco-languageclient/blob/main/docs/versions-and-history.md#monaco-editor--codingamemonaco-vscode-api-compatibility-table

When I do this in your shared project, I ran into the same problem I had with our angular verification example, that I was only able to resolve with @analogjs/vite-plugin-angular. Hope this helps.

[vishnuvarthan-balasubramaniam]

Hi @kaisalmen Thank you for taking the time to explore the project.
As mentioned in my previous comment, leveling the version 25.1.2 still triggers the 'getExtUri' error within the Angular build system, the same issue I originally reported, refer discussion.
I followed your recommendation to isolate the monaco-languageclient module and build it using the vite and rollup configurations. Unfortunately, this approach resulted in the exact same error.
Have you had the opportunity to test version 25.1.2 by building the library and successfully consuming it within an Angular environment?
Please let me know if you need any additional logs, configurations, or further information from my end to help reproduce this.
Thanks again for your help.

[kaisalmen]

The only stable solution I found is using @analogjs/vite-plugin-angular and not rely on the angular build system. Pre-bundling may work, but I have no time to investigate this right now.