Webpack构建的TS类库在Angular中导入失败：模块未找到

核心问题分析 #

• package.json的main字段错误：你将main指向了未编译的TS源文件./dist/my-lib/index.ts，但Angular需要加载Webpack编译后的可执行JS文件。
• Webpack缺少类库导出配置：当前配置仅打包出JS文件，但未指定类库的导出格式，导致Angular无法识别模块内的成员。
• TS配置缺失关键项：需确保TypeScript生成正确的类型声明文件，才能让Angular识别类库的类型。

具体修复步骤 #

1. 修改package.json配置 #

调整main字段指向编译后的JS文件，同时适配Angular的模块解析规范：

{
  "name": "my-lib",
  "version": "1.0.16",
  "description": "",
  "main": "./dist/my-lib/my-lib.js", // 改为Webpack输出的JS文件名
  "types": "./dist/my-lib/index.d.ts",
  "type": "commonjs", // 适配Webpack4与Angular的模块解析逻辑
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.cjs"
  },
  // 其他内容保持不变
}

2. 完善Webpack配置（webpack.common.cjs） #

添加类库导出相关配置，确保模块能被Angular正确识别：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 修复插件导入方式

module.exports = {
  entry: path.resolve(__dirname, './src/index.ts'),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'my-lib.js',
    path: path.resolve(__dirname, 'dist/my-lib'),
    library: 'my-lib', // 指定类库名称
    libraryTarget: 'umd', // 兼容CommonJS/AMD/全局变量等多种模块规范
    umdNamedDefine: true,
    globalObject: 'this' // 避免浏览器环境下的全局变量冲突
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};

注：修复了原配置中CleanWebpackPlugin导入方式和插件数组的语法错误。

3. 配置tsconfig.json #

确保TypeScript生成正确的类型声明和编译产物：

{
  "compilerOptions": {
    "target": "ES5", // 适配Angular支持的运行环境
    "module": "ESNext",
    "declaration": true, // 生成.d.ts类型声明文件
    "outDir": "./dist/my-lib", // 输出目录与Webpack保持一致
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. 重新构建并验证 #

• 执行npm run build重新构建类库
• 在Angular项目中重新安装类库（本地开发可使用npm link或本地路径安装）
• 再次尝试import {Comp} from 'my-lib'导入

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