Angular 17项目无法引入dwbn-event-webcomponents库的解决方法

我们正在开发一款可独立使用、也能导入TypeScript项目（Angular 17）的JavaScript库dwbn-event-webcomponents，已通过Git URL完成npm安装，但在Angular项目中出现如下错误：

event.module.ts:5:0-52 - Error: Module not found: Error: Can't resolve 'dwbn-event-webcomponents' in 'src/app/modules/ondemand'

该库的package.json配置如下：

{
  "name": "dwbn-event-webcomponents",
  "version": "1.0.8",
  "description": "A powerfull but easy to integrate web component",
  "main": "src/js/events-webcomponents.js",
  "module": "src/js/events-webcomponents.js",
  "source": "src/js/events-webcomponents.js",
  "types": "types/event-webcomponents.d.ts",
  "type": "module",
  "keywords": [
    "events"
  ],
  "devDependencies": {
    "@inquirer/prompts": "^7.0.1",
    "clean-webpack-plugin": "^4.0.0",
    "gulp": "^5.0.0",
    "semver": "^7.6.3",
    "typescript": "^5.6.3",
    "webpack": "^5.95.0",
    "webpack-stream": "^7.0.0"
  },
  "engines": {
    "node": ">= 18"
  }
}

文件均在指定位置，且已通过npx tsc生成TypeScript类型定义文件，需解决模块找不到的错误，让库能在TypeScript项目中正常使用。

1. 修正库的文件发布路径 #

当前package.json的main/module字段指向源码目录src/js/...，但通过Git URL安装时，npm默认可能忽略src目录（取决于.npmignore或.gitignore配置），导致Angular打包工具无法定位文件。

需将库构建后的产物作为入口：

• 使用webpack/gulp构建库，将产物输出到dist目录（例如dist/events-webcomponents.js）
• 更新package.json的对应字段：

  "main": "dist/events-webcomponents.js",
  "module": "dist/events-webcomponents.js",
  "types": "dist/event-webcomponents.d.ts"
  

• 确保dist目录被纳入Git提交（不要在.gitignore中排除该目录），或者在库的package.json中添加files字段明确指定要发布的文件：

  "files": [
    "dist",
    "types"
  ]
  

2. 确保ES模块兼容性 #

库的type字段设为module，需保证输出的产物是兼容的ES模块：

• 检查webpack配置，确保输出格式为ES模块：

  module.exports = {
    output: {
      filename: 'events-webcomponents.js',
      library: {
        type: 'module'
      }
    },
    experiments: {
      outputModule: true
    }
  };
  

3. 验证TypeScript类型定义路径 #

安装库后，在Angular项目的node_modules/dwbn-event-webcomponents目录下，检查types/event-webcomponents.d.ts是否存在。如果类型文件在构建后输出到dist目录，需同步更新package.json的types字段为dist/event-webcomponents.d.ts。

4. Angular项目的路径映射配置 #

若上述步骤仍无法解决问题，可在Angular项目的tsconfig.json中添加路径映射：

{
  "compilerOptions": {
    "paths": {
      "dwbn-event-webcomponents": [
        "./node_modules/dwbn-event-webcomponents/dist/events-webcomponents.js"
      ]
    }
  }
}

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