Angular 19+Vite启动报错：模块'/@vite/client'无'injectQuery'导出

问题场景 #

Angular升级到19版本后，构建和单元测试都能正常通过，但执行带--live-reload false参数的启动命令（npm run start:ci）时，浏览器抛出以下错误：

Uncaught SyntaxError: The requested module '/@vite/client' does not provide an export named 'injectQuery' (at pdfjs-dist_legacy_build_pdf__mjs.js?v=ebba6358:1:10)

项目中通过import * as pdfJsLib from 'pdfjs-dist/legacy/build/pdf.mjs';引入pdfjs-dist库，同时将修改后的脚本通过angular.json的assets配置纳入构建资源。

排查与解决步骤 #

1. 升级pdfjs-dist至兼容版本 #

Angular 19基于Vite 5.x，旧版pdfjs-dist可能未适配Vite 5的模块导出逻辑。执行以下命令升级到最新稳定版：

npm install pdfjs-dist@latest

升级完成后重新构建并启动应用，验证错误是否消失。

2. 配置Vite跳过pdfjs-dist的依赖优化 #

错误根源是pdfjs-dist的legacy构建尝试导入Vite客户端模块的injectQuery导出，但该导出在Vite 5中已移除或变更。在项目的vite.config.ts中添加以下配置：

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

export default defineConfig({
  plugins: [angular()],
  optimizeDeps: {
    // 跳过对pdfjs-dist的依赖预构建，避免Vite客户端模块注入
    exclude: ['pdfjs-dist']
  },
  resolve: {
    // 明确指定pdfjs-dist的导入路径，避免解析歧义
    alias: {
      'pdfjs-dist': 'pdfjs-dist/legacy/build/pdf.mjs'
    }
  }
});

3. 消除assets配置与ES模块导入的冲突 #

如果同时通过angular.json的assets配置引入自定义pdfjs脚本，又通过ES模块导入官方包，会导致模块加载冲突：

• 移除angular.json中assets数组里的pdfjs相关脚本配置，仅保留import * as pdfJsLib from 'pdfjs-dist/legacy/build/pdf.mjs';的导入方式
• 若必须使用修改后的脚本，将其封装为自定义ES模块，替换项目中对官方pdfjs-dist的导入路径

4. 调整禁用热重载时的Vite模式 #

禁用热重载后，Vite的模块解析逻辑可能切换到不同模式，尝试在vite.config.ts中强制指定生产模式的解析规则：

export default defineConfig({
  // ...其他配置
  server: {
    hmr: false,
    mode: 'production'
  }
});

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