Angular 14中如何正确导入node_modules内私有NPM包的TypeScript类

问题根源 #

你的私有NPM包缺少正确的模块配置，导致Angular的Webpack构建无法识别包的导出内容。直接复制到src目录能正常工作，是因为Angular会自动编译src下的TypeScript文件，而node_modules中的包需要预编译并配置正确的入口字段。

最佳解决方案：正确配置私有NPM包 #

1. 完善包的package.json #

在私有包的根目录创建/修改package.json，添加以下关键字段：

{
  "name": "@package/test-class",
  "version": "1.0.0",
  "main": "./dist/test-class.js",       // CommonJS格式入口
  "module": "./dist/test-class.esm.js", // ES模块格式入口
  "types": "./dist/test-class.d.ts",    // 类型定义文件路径
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.9.5" // 匹配Angular 14兼容的TS版本
  }
}

2. 添加TypeScript编译配置 #

在私有包根目录创建tsconfig.json，配置编译规则：

{
  "compilerOptions": {
    "target": "ES2020",        // 匹配Angular 14的目标环境
    "module": "ESNext",        // 生成ES模块格式
    "declaration": true,       // 生成类型定义文件
    "outDir": "./dist",        // 编译输出目录
    "strict": true,
    "esModuleInterop": true    // 兼容CommonJS模块导入
  },
  "include": ["test-class.g.ts"], // 要编译的源文件
  "exclude": ["node_modules", "dist"]
}

3. 编译并发布私有包 #

• 运行npm install安装依赖
• 执行npm run build生成dist目录的编译文件和类型定义
• 将包发布到你的私有NPM仓库（如Verdaccio、公司私有源等）

4. Angular项目中正常使用 #

更新Angular项目中的包依赖后，直接按原有方式导入即可：

import { TestClass } from '@package/test-class';

额外说明 #

如果你的包非常简单，也可以尝试将源文件直接作为入口（不编译），但需要在package.json中设置type: "module"，并确保Angular的tsconfig支持解析ES模块。不过预编译成JS+类型定义的方式是NPM包的标准做法，兼容性更好。

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