如何在库项目中配置绝对导入路径并适配客户端应用？

一、解决库打包后@lib路径无法被客户端解析的问题 #

你的核心问题是：Angular CLI打包库时，没有将内部的@lib路径别名转换为相对路径，导致客户端应用无法识别这些别名。以下是两种可行的解决方案：

方案1：使用tsc-alias工具替换路径别名 #

tsc-alias可以在TypeScript编译后，将文件中的路径别名替换为相对路径，完美适配你的场景：

1. 安装依赖：

npm install tsc-alias --save-dev

2. 修改根目录package.json的打包脚本，在build后添加路径替换步骤：

"scripts": {
  "copy-license": "cp ./LICENSE.md ./dist/midi-lib",
  "copy-readme": "cp ./README.md ./dist/midi-lib",
  "copy-files": "npm run copy-license && npm run copy-readme",
  "build-lib": "ng build midi-lib",
  "fix-paths": "tsc-alias -p projects/midi-lib/tsconfig.lib.json",
  "npm-pack": "cd dist/midi-lib && npm pack",
  "package": "npm run build-lib && npm run fix-paths && npm run copy-files && npm run npm-pack"
}

3. 确保projects/midi-lib/tsconfig.lib.json中的路径配置正确指向库内部：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@lib/*": ["src/lib/*"]
    },
    // 保留原有其他配置...
  }
}

执行npm run package后，dist中的.d.ts和.js文件里的@lib/xxx会被替换成相对路径（比如./store/soundtrack-store），客户端应用就能正常解析了。

方案2：配置ng-packagr自动处理路径别名 #

Angular库打包依赖ng-packagr，你可以通过调整库的配置让它自动处理路径映射：

1. 在projects/midi-lib/ng-package.json中添加paths配置（如果没有这个文件，手动创建）：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/midi-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "paths": {
      "@lib/*": ["src/lib/*"]
    }
  }
}

2. 确保tsconfig.lib.json的paths和上述配置一致，然后重新执行打包脚本。

这种方式依赖ng-packagr的内置路径处理能力，部分版本可能需要配合baseUrl一起使用，建议优先尝试方案1，兼容性更好。

二、为什么是子项目tsconfig继承根目录，而非反过来？ #

这个设计完全符合Angular工作区的配置逻辑：

• 根目录tsconfig.json是工作区通用配置：它定义了整个工作区共享的TypeScript编译选项，比如target、module、lib、strict等规则，确保所有子项目（库、应用）的编译行为保持一致。
• 子项目tsconfig.lib.json是项目特有配置：它只需要添加或覆盖库专属的配置（比如paths、outDir、declaration等），避免重复编写通用配置。

如果反过来让根目录继承库的tsconfig，会导致工作区里的其他项目（比如你的midi-app）被迫继承库的编译规则，这显然不合理——应用和库的编译目标不同（应用要编译成浏览器可执行代码，库要编译成可被导入的模块），通用配置放在根目录才能最大化复用性。

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