无需修改导入语句，在Demo应用中开发并测试Angular库

问题场景 #

你的Angular项目结构如下：

├── projects
│    ├── lib-1
│    ├── lib-2
│    ├── lib-wrapper
│    .
│    .
│
└── src
     ├── app
     ├── assets
     .
     .

同时开发库和集成库的应用时，面临两个核心需求：

• 开发阶段：直接链接库源码，实时修改无需提前构建，避免频繁调整相对路径
• 构建阶段：导入已编译的库包（如import { a } from "lib-1"），符合生产环境的消费形式
  且lib-wrapper依赖lib-1/lib-2，同样需要在开发/构建时切换导入逻辑，而fileReplacements仅支持修改src/app代码，无法覆盖库之间的依赖关系。

解决方案 #

1. 统一使用包名导入 #

所有代码（应用和库）中，全部采用包名形式导入，示例如下：

// 应用代码
import { a } from "lib-1";
// lib-wrapper代码
import { b } from "lib-2";

无需再写冗长的相对路径，后续通过配置自动切换解析目标。

2. 配置开发环境的路径映射（根tsconfig.json） #

在项目根目录的tsconfig.json中，添加TypeScript路径别名，让开发时直接解析到库源码：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "lib-1": ["projects/lib-1/src/public-api.ts"],
      "lib-2": ["projects/lib-2/src/public-api.ts"],
      "lib-wrapper": ["projects/lib-wrapper/src/public-api.ts"]
    }
  }
}

运行ng serve时，TypeScript会直接指向库的源码文件，修改库代码后应用会实时更新。

3. 配置生产构建的路径映射（tsconfig.prod.json） #

创建生产专用的tsconfig.prod.json，覆盖路径配置，让构建时从node_modules解析已编译的库：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "paths": {
      "lib-1": ["node_modules/lib-1"],
      "lib-2": ["node_modules/lib-2"],
      "lib-wrapper": ["node_modules/lib-wrapper"]
    }
  }
}

也可以直接删除paths字段，让TypeScript默认从node_modules查找包。

4. 配置库之间的开发依赖映射 #

在lib-wrapper的tsconfig.lib.json中，同样添加路径别名，确保开发时lib-wrapper能直接引用lib-1/lib-2的源码：

{
  "compilerOptions": {
    "baseUrl": "../../",
    "paths": {
      "lib-1": ["projects/lib-1/src/public-api.ts"],
      "lib-2": ["projects/lib-2/src/public-api.ts"]
    }
  }
}

构建库时，Angular CLI会自动将这些源码路径替换为正式的包名依赖，无需额外修改。

5. 构建流程说明 #

• 开发阶段：直接执行ng serve，所有导入自动指向库源码，实时生效。
• 构建阶段：
  1. 先编译所有库：ng build lib-1 && ng build lib-2 && ng build lib-wrapper，编译产物会输出到dist目录。
  2. 将编译后的库安装到项目的node_modules（可使用npm link ./dist/lib-1这类命令，或直接在package.json中添加本地依赖）。
  3. 执行ng build --configuration production，此时应用会使用tsconfig.prod.json的配置，从node_modules导入已编译的库包。

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