application builder fails to load imports with *?worker when prebudling is set to false.

[Carlosamouco]

Command

build, serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I tried to import monaco-editor using it's ESM version and the application builder.

It requires to import a set of workers for example:

import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';

After adding vite/client to the types section in tsconfig.json it compiles and works fine.

However, if I run the build command with prebundle set to false, I start having errors:

X [ERROR] No matching export in "node_modules/monaco-editor/esm/vs/language/json/json.worker.js?worker" for import "default"

As an workaround I tried adding a script in angular.json:

{
  "bundleName": "monaco-json.worker",
  "inject": false,
  "input": "./node_modules/monaco-editor/esm/vs/language/json/json.worker.js"
}

But when I run:

new Worker('/monaco-json.worker.js');

I get the following error:

[vite] Internal server error: Failed to resolve import "../../editor/editor.worker.js" from ".angular\vite-root\CoreHTML\monaco-json.worker.js". Does the file exist?

I tried using the amd version but it is not compatible with some of our dependencies, for example, it breaks mathjs due to the global define function created by the monaco-editor loader.

Minimal Reproduction

1. Clone https://github.com/Carlosamouco/monaco-workers-repro
2. npm install
3. ng serve --perbundle=false

Exception or Error

No response

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.3.0
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.0
@angular-devkit/build-angular   17.3.0
@angular-devkit/core            17.3.0
@angular-devkit/schematics      17.3.0
@schematics/angular             17.3.0
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Anything else relevant?

No response

[alan-agius4]

This is expected as ?worker is vite specific and will only work during development for dependencies that are optimized by Vite. This approach however will not work for a production build.

To make this work you need to do the following;

• Create a file example json.worker.ts
• In this file add an import to the worker import 'monaco-editor/esm/vs/language/json/json.worker';
• Create the worker using the following syntax new Worker(new URL('./json.worker', import.meta.url));

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}