如何在Angular库中引入dashjs、leaflet等外部依赖？

1. 安装依赖并配置依赖类型 #

Angular库推荐将外部依赖声明为peerDependencies，避免重复打包且让使用库的项目自主管理依赖版本。执行以下命令安装：

npm install dashjs leaflet --save-peer

如果需要TypeScript类型定义（大部分主流库都有），安装对应的@types包作为开发依赖：

npm install @types/dashjs @types/leaflet --save-dev

2. 配置全局资源（如CSS、字体） #

Angular库使用ng-package.json（位于库的根目录，比如projects/your-library/ng-package.json）管理打包资源。如果依赖包含全局CSS（比如leaflet的样式），在该文件中添加styles字段；如果有静态资源（如leaflet的图标），添加assets字段：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "styles": [
    "./node_modules/leaflet/dist/leaflet.css"
  ],
  "assets": [
    "./node_modules/leaflet/dist/images/**"
  ]
}

这样打包时，这些资源会被包含到库的输出目录中，使用库的项目无需额外配置即可加载。

3. 在库代码中引入并使用依赖 #

模块化引入（推荐） #

直接在组件或服务中import依赖，正常调用API：

// 使用dashjs
import dashjs from 'dashjs';

export class DashPlayerComponent {
  initPlayer() {
    const player = dashjs.MediaPlayer().create();
    player.initialize(document.getElementById('dash-player'), 'your-stream-url', true);
  }
}

// 使用leaflet
import * as L from 'leaflet';

export class MapComponent implements OnInit {
  ngOnInit() {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  }
}

处理全局挂载的依赖（部分旧库） #

如果依赖没有提供ES模块，而是挂载到window对象上，需要在tsconfig.lib.json中配置类型，或者在库的src/typings.d.ts中声明全局变量：

// src/typings.d.ts
declare var dashjs: any;

之后就可以在代码中直接使用dashjs全局变量。

4. 测试依赖是否生效 #

如果你的库带有demo项目（通常在projects/your-library-demo），在demo项目中安装库并使用相关组件，验证dashjs/leaflet的功能是否正常运行，同时检查打包后的库是否能被其他Angular项目正常引入使用。

5. 文档说明 #

在库的README中明确告知使用者需要安装对应的peer依赖：

使用本库前请先安装依赖：

npm install dashjs leaflet

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