能否在Angular应用的index.html中运行Web Worker？相关报错如何解决

404路径找不到文件的原因 #

Angular开发服务器（ng serve启动的本地服务）默认只会对外暴露在配置中声明为静态资源的文件，即便你的myScript.js和index.html放在同一目录，只要没有在Angular的静态资源配置里登记，开发服务器就不会把这个文件映射到localhost:4200的根路径下，自然会返回404。
如果调试时发现实际请求的路径和你写的引入路径不一致（比如你引入的是myScript.js，实际报错请求的是myScripts.js），优先检查是不是脚本标签的src字段输入时写错了字符。

跨端口加载时的MIME类型报错原因 #

浏览器对type="module"的脚本有严格的MIME校验规则：只有当响应的Content-Type字段是合法的JavaScript MIME类型时，才会执行脚本。你单独在5555端口启动的静态服务，没有给返回的js文件配置正确的响应头，导致返回的MIME类型为空，触发了浏览器的拦截规则。
另外这个报错还隐藏了一个常见问题：你代码里尝试加载的是app.worker.ts后缀的文件，浏览器原生不支持解析TypeScript语法，就算MIME类型正确，也无法直接执行未编译的TS代码。

Web Worker实现的明显问题 #

你当前写的Worker创建代码存在三个问题：

• 跨端口加载Worker文件会触发浏览器的同源策略限制，主应用运行在4200端口下，默认无法直接加载5555端口下的Worker资源
• 直接引用TS源文件，没有经过编译流程生成浏览器可执行的JS代码
• 跨服务加载的资源没有配置正确的CORS和MIME响应头，双重触发浏览器安全拦截

对应修复步骤 #

• 解决4200端口下的文件404问题
  1. 常规方案：把myScript.js移动到src/assets目录下，这个目录默认已经被Angular配置为静态资源目录，随后把index.html里的脚本引入路径改成src="assets/myScript.js"即可正常访问
  2. 自定义路径方案：如果不想调整文件位置，可以打开angular.json配置文件，找到当前项目的build.options.assets配置项，手动添加一条映射规则，把项目根目录的myScript.js声明为静态资源，这样直接用根路径引入src="myScript.js"也能被开发服务器正确返回
• 解决MIME类型拦截问题
  不要单独启动额外服务托管需要被主应用加载的脚本文件，所有脚本资源都要纳入Angular的构建体系，由Angular开发服务器/生产构建自动返回正确的MIME类型。如果必须用独立服务托管脚本，需要给所有js类文件配置Content-Type: application/javascript的响应头。
• 正确实现Web Worker的方式
  完全不需要跨端口做额外的服务部署：Angular内置了Web Worker的全流程支持，可以通过内置命令生成标准化的Worker文件，自动处理TS编译、路径映射、MIME类型返回、同源校验的所有问题，主应用中直接引用编译后的Worker产物即可正常通信。

  注意：内联脚本中创建模块类型的Worker时，不要直接引用项目里的TS源文件路径，必须引用构建流程生成的可执行JS产物路径，否则会直接触发加载失败。

内容的提问来源于stack exchange，提问作者Ish Montalvo