Angular 17 SSR模式运行时无法找到Web Worker脚本，求解决方案

启用SSR的Angular 17项目执行ng serve时，终端和Web UI都会弹出如下错误：

[plugin:vite:import-analysis] Failed to resolve import "./assets/js/worker.js" from "/index.html?html-proxy&index=0.js". Does the file exist?
/index.html:2:31
1 |

import { asyncRun } from './assets/js/worker.js';
^
window.worker = { asyncRun };

对应的index.html代码片段：

<script type="module">
  import { asyncRun } from './assets/js/worker.js';
  window.__worker__ = { asyncRun };
</script>

Angular 16用Webpack时该写法正常，但Angular 17默认切换为Vite后出现此问题，以下是几种可行的解决方式：

1. 改用绝对路径导入 #

Vite对index.html中的模块导入路径解析逻辑和Webpack不同，把相对路径改成以/开头的绝对路径，直接指向assets目录下的文件：

<script type="module">
  import { asyncRun } from '/assets/js/worker.js';
  window.__worker__ = { asyncRun };
</script>

2. 确保JS文件是标准ES模块格式 #

检查assets/js/worker.js是否正确导出asyncRun，必须是ES模块格式才能被import：

// assets/js/worker.js
export const asyncRun = () => {
  // 这里写你的业务逻辑
};

3. 通过angular.json配置引入脚本（推荐） #

在项目的angular.json中，找到对应项目的build配置，把worker.js添加到scripts数组里，让Angular CLI和Vite正确处理这个文件：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "src/assets/js/worker.js"
            ]
          }
        }
      }
    }
  }
}

之后修改index.html中的脚本，改用动态导入的方式：

<script type="module">
  import('./assets/js/worker.js').then(module => {
    window.__worker__ = { asyncRun: module.asyncRun };
  });
</script>

4. 配置Vite的publicDir（自定义静态资源目录时用） #

如果你的静态资源目录不是默认的src/assets，可以在vite.config.ts里配置publicDir，让Vite识别这个目录下的文件：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/builders/dev-server/vite-plugin';

export default defineConfig({
  plugins: [angular()],
  publicDir: 'src/assets' // 这里填你的静态资源目录路径
});

内容的提问来源于stack exchange，提问作者Jane Wayne