Error
An error has occurred in the following files: node_modules/typescript/lib/lib.dom.d.ts and node_modules/typescript/lib/lib.webworker.d.ts. Definitions of various identifiers conflict with those in other files, leading to modifier conflicts and duplicate number index signatures.
I have a reference for this issue at:
https://angular.io/guide/web-worker
PS D:\angular-tour-of-heroes> ng generate web-worker app
CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/app.worker.ts (157 bytes)
UPDATE src/tsconfig.app.json (295 bytes)
UPDATE angular.json (4990 bytes)
In your app.component.ts file:
if (typeof Worker !== 'undefined') {
// Create a new
const worker = new Worker('./app.worker', { type: 'module' });
worker.onmessage = ({ data }) => {
console.log(`page got message: ${data}`);
};
worker.postMessage('hello');
} else {
// Web Workers are not supported in this environment.
// You should add a fallback so that your program still executes correctly.
}
Your app.worker.ts code:
/// <reference lib="webworker" />
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});
Update your tsworker.json file:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/worker",
"lib": [
"es2018",
"webworker"
],
"types": []
},
"include": [
"src/**/*.worker.ts"
]
}
And your main tsconfig file:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"**/*.worker.ts"
]
}
Important information from Angular Docs:
When using Web Workers in Angular projects, keep in mind that some environments or platforms may not support them (like @angular/platform-server). Providing a fallback mechanism is crucial. Running Angular itself in a Web Worker via @angular/platform-webworker is currently not supported in Angular CLI.
main.js:1305 Uncaught TypeError: Failed to construct 'Worker': Module scripts are not supported on DedicatedWorker yet. You can try the feature with '--enable-experimental-web-platform-features' flag (see https://crbug.com/680046)
at Module../src/app/app.component.ts (main.js:1305)
at __webpack_require__ (runtime.js:79)
at Module../src/app/app.module.ngfactory.js (main.js:1332)
at __webpack_require__ (runtime.js:79)
at Module../src/main.ts (main.js:10012)
at __webpack_require__ (runtime.js:79)
at Object.0 (main.js:10034)
at __webpack_require__ (runtime.js:79)
at checkDeferredModules (runtime.js:46)
at Array.webpackJsonpCallback [as push] (runtime.js:33)
- If you are facing issues with Web Workers, here's how to fix it:
- In Chrome browser, go to chrome://flags/.
- Enable Experimental Web Platform features under Experimental Web Platform options.
- Relaunch the browser.
https://i.stack.imgur.com/Eb6XT.png
The browser setting might resolve some issues, but errors could still persist.