使用Bazel+Esbuild构建Angular时TS路径别名解析失败求助

以下是针对问题的具体解决步骤：

1. 让Bazel规则识别TS路径别名 #

Bazel的TypeScript相关规则（如ts_library）不会自动读取tsconfig里的路径映射，必须单独配置：

• 在对应模块的BUILD.bazel中，给ts_library添加paths属性，和tsconfig里的配置保持一致：

  ts_library(
      name = "shared_lib",
      srcs = glob(["src/app/shared/**/*.ts"]),
      paths = {
          "@shared/*": ["src/app/shared/*"],
          "@core/*": ["src/app/core/*"],
          "@features/*": ["src/app/features/*"],
      },
      declarations = True, # 生成类型声明文件
      # 其他必要属性（如deps、tsconfig等）
  )
  

• 也可以在顶层ts_config规则中统一配置路径，让所有依赖该配置的目标共享：

  ts_config(
      name = "tsconfig",
      src = "tsconfig.json",
      paths = {
          "@shared/*": ["src/app/shared/*"],
          "@core/*": ["src/app/core/*"],
          "@features/*": ["src/app/features/*"],
      },
  )
  

2. 正确配置Esbuild路径解析插件 #

如果你用@bazel/esbuild规则，需要确保插件初始化时指向正确的tsconfig，并且路径解析逻辑生效：
修改ng-esbuild.ts中的插件配置，确保baseUrl和tsconfig里的配置匹配，并且tsconfig路径正确：

import { build } from '@bazel/esbuild';
import { TsconfigPathsPlugin } from '@esbuild-plugins/tsconfig-paths';
import * as path from 'path';

build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  plugins: [
    TsconfigPathsPlugin({
      tsconfig: path.resolve(__dirname, './tsconfig.json'),
      baseUrl: './src', // 和tsconfig里的baseUrl保持一致
    }),
  ],
  // 其他Esbuild构建配置
});

注意：如果你的Bazel工作区包含多个子包，要使用相对于当前包的路径，或者绝对路径指向正确的tsconfig文件。

3. 确保类型声明正确导出与依赖 #

• 检查@shared/foo所在文件是否正确导出Foo：

  // src/app/shared/foo.ts
  export class Foo {}
  

• 确保包含该文件的ts_library开启了declarations = True，生成.d.ts类型声明文件；如果是发布的库，还要在package.json中指定types字段指向声明文件入口。

4. 显式声明Bazel依赖关系 #

Bazel不会通过路径别名自动推断依赖，必须在使用别名的目标中显式依赖对应模块：

ts_library(
    name = "feature_lib",
    srcs = glob(["src/app/features/**/*.ts"]),
    deps = [
        "//src/app/shared:shared_lib", // 显式依赖共享库目标
    ],
    paths = {
        "@shared/*": ["src/app/shared/*"],
    },
)

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