How to load worker(js/ts) with webpack 5

I am facing the issue after I upgraded my project from angular 12 to angular 13(including webpack upgradation from webpack 4 to webpack 5).

//Before upgrade

import * as testworker from ‘worker-loader!./test.worker.bundle.js’;

// After upgrade to webpack 5

const testworker = new Worker(new URL(“test.worker.bundle.js”, import.meta.url));

I had to change as mentioned above after upgrade to webpack 5 to make ng build successful. But when we run command of ng serve getting runtime error with '*DOMException: Failed to construct ‘Worker’: Script at ‘file::/// Path to js file’ ‘http://localhost/: test.worker.bundle.js’ cannot be accessed from origin ‘http://localhost:4200/’.
Also we are not able to bundle the worker file along with the angular application bundle file.
I tried adjusting output block in config file as well. None of them is solving the issue.

Following are the versions from package.json:
“webpack”: “^5.64.0”,
“webpack-cli”: “^5.0.1”,
“webpack-merge”: “^4.1.4”,
“worker-loader”: “^2.0.0”,

Let me know if anywhere else has to be changed.

What happens if you add it as a relative file path?


Even after adding relative path we are facing same issue.