Angular 18改用Vite构建后包解析失败，求可行配置方案

升级到Angular 18并采用Vite作为构建工具后，出现包解析失败的错误，示例错误信息如下：

X [ERROR] Could not resolve "@angular/common/http"

    ../../../../http-options.ts:1:27:
      1 │ import { HttpParams } from "@angular/common/http";
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@angular/common/http" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

问题背景 #

存在两个独立项目，各有自己的package.json，此前通过tsconfig.json的paths配置实现跨项目包引用：

"paths": {
  "@angular/*":  [ "../node_modules/@angular/*" ],
}

已安装vite-tsconfig-paths并配置vite.config.ts的resolve别名，但问题仍未解决。

可行方案及配置调整 #

1. 修正Vite中resolve.alias的配置逻辑 #

vite-tsconfig-paths虽能读取tsconfig的paths，但@angular/*这类包的重定向存在匹配优先级问题，建议在vite.config.ts中显式指向具体的ES模块文件：

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
  resolve: {
    alias: {
      '@angular/common/http': '../node_modules/@angular/common/fesm2022/common-http.mjs',
      '@angular/common': '../node_modules/@angular/common/fesm2022/common.mjs',
      // 其他@angular包按此格式配置，指向对应fesm目录下的模块文件
    },
  },
});

2. 优化tsconfig.json的路径配置 #

添加baseUrl明确基准路径，确保paths规则的优先级：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"]
    }
  }
}

3. 临时标记外部依赖（仅调试用） #

如果只是本地调试需要快速绕过错误，可将无法解析的包标记为外部依赖，让Vite跳过解析：

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['@angular/common/http', '@angular/common'],
    },
  },
});

注意：此方式会将依赖留在bundle中，生产环境使用可能导致运行时错误，仅作临时方案。

4. 工作区统一依赖（长期推荐） #

两个项目独立维护package.json易引发依赖版本不一致，建议通过npm workspaces或pnpm workspace将两个项目纳入同一工作区，共享node_modules，从根源解决跨项目依赖解析问题。

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