I'm working on an Angular 9 app, and we use web workers for heavier computation. The whole application is written in Typescript, including the web workers. Unfortunately, I can't figure out the proper way to get the Angular build to create a sourcemap for the web worker code so that Chrome debugger
Here's what I see happening:
I have a file within my Angular project editor.worker.ts which describes the web worker. This worker gets instantiated elsewhere as:
const worker = new Worker('./editor.worker', { name: 'Editor', type: 'module' });
After building the application and loading in Chrome, when I enter devtools Sources tab and search for the worker, I find these two files:
editor.worker.ts contains just one line:
module.exports = __webpack_public_path__ + "Editor.worker.js"
Editor.worker.js contains the transpiled Javascript.
As the app runs in Chrome, I can set breakpoints in the transpiled .js file, and the debugger will pause when it hits the line of code. However, the highlighted line in source is the single line in editor.worker.ts. When I browse back over to the Editor.worker.js source file, my breakpoint does not show up anymore, and the debugger doesn't recognize the specific line of code where execution is paused, and I have no ability to step through the code