Angular多项目工作区tsconfig paths别名配置导致导入报错的解决

配置出现导入错误的根本原因有两点，和TS、VSCode的解析规则直接相关：

• 路径拼接逻辑错误：TS 配置中的 paths 是相对于当前生效的 baseUrl 解析，而非 tsconfig 文件所在目录。你在项目级 tsconfig.app.json 中将 baseUrl 设为 ./src（即项目的 src 目录）后，paths 里仍写 src/app/*，会被拼接成 项目根/src/src/app/* 的无效路径，自然找不到导入源。
• TS 配置继承规则：子 tsconfig 中如果定义了 compilerOptions.paths，会完全覆盖父级配置的 paths，不会做合并；同时 VSCode 的 TS 服务默认只加载项目根目录的 tsconfig，不会自动识别子项目下的 tsconfig.app.json，因此即使项目编译配置正确，编辑器也会标红提示别名错误。

按照以下步骤调整，即可实现每个项目的 @app 别名独立指向自身源码，不需要加项目后缀：

1. 调整根 tsconfig 为公共基础配置 #

根目录的 tsconfig.json 移除所有项目级的 paths 配置，只保留所有项目通用的编译规则：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "esModuleInterop": true,
    "target": "es2015",
    "lib": ["es2018", "dom", "esnext.asynciterable"],
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

2. 修正项目级 tsconfig 的路径配置 #

每个项目下的 tsconfig.app.json 选择以下两种 baseUrl 配置方案之一即可，推荐方案一（适配 e2e 等不在 src 下的路径）：

方案一（推荐）：baseUrl 指向项目根目录 #

将 baseUrl 设为项目根目录（和 tsconfig.app.json 同目录），paths 路径直接写相对于项目根的地址，不需要额外拼接：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../../out-tsc/app",
    "paths": {
      "@app/*": ["src/app/*"],
      "@e2e/*": ["e2e/src/*"],
      "@environments/*": ["src/environments/*"]
    },
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

方案二：baseUrl 保持指向项目 src 目录 #

如果需要将 baseUrl 设为项目的 src 目录，需要去掉 paths 里重复的 src/ 前缀，同时修正 e2e 的相对路径：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "../../out-tsc/app",
    "paths": {
      "@app/*": ["app/*"],
      "@e2e/*": ["../e2e/src/*"],
      "@environments/*": ["environments/*"]
    },
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

3. 解决 VSCode 别名识别问题 #

VSCode 原生不会自动加载子项目的 tsconfig.app.json，二选一即可解决编辑器标红问题：

• 方案一：在每个项目根目录下新增独立的 tsconfig.json，写入和上述项目级 paths 一致的配置，原 tsconfig.app.json 改为继承这个项目级的 tsconfig。VSCode 会自动向上查找文件对应目录的 tsconfig 应用配置，无需额外设置。
• 方案二：在工作区的 .vscode/settings.json 中配置 TS 服务的路径映射，指定不同路径下的文件使用对应项目的 tsconfig：

  {
    "typescript.tsserver.tsconfigPaths": {
      "projects/项目A/*": "projects/项目A/tsconfig.app.json",
      "projects/项目B/*": "projects/项目B/tsconfig.app.json"
    }
  }
  

4. 确认 Angular CLI 编译配置 #

检查 angular.json 中每个项目的构建选项，确保 tsConfig 字段正确指向对应项目的 tsconfig.app.json，Angular CLI 会在编译时自动加载对应配置，不会触发导入报错。

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