Angular10使用@elastic/elasticsearch7.15.0出现依赖缺失报错如何解决

官方的@elastic/elasticsearch包是为Node.js服务端环境设计的，依赖http、https、os等Node.js原生内置模块，Angular是前端浏览器环境，默认不存在这些模块，因此编译时会报找不到对应模块的错误。

方案一：后端代理转发（最推荐） #

• 不在前端直接调用Elasticsearch接口，避免将ES的访问地址、账号密码明文暴露在前端代码中，引发数据泄露、数据被恶意篡改的风险
• 新增后端接口作为代理层，前端请求自己的后端接口，由后端服务向Elasticsearch发起请求后将结果返回给前端，从根源上规避前端依赖问题

方案二：使用Elasticsearch官方浏览器客户端 #

如果暂时没有后端开发资源，需要临时在前端调用ES，可以使用官方专为浏览器环境封装的客户端包：

1. 卸载原有Node版ES依赖：

npm uninstall @elastic/elasticsearch

2. 安装对应版本的浏览器版ES客户端：

npm install @elastic/elasticsearch-browser@7.15.0

3. 修改导入语句：

import { Client } from '@elastic/elasticsearch-browser'

4. 在Elasticsearch服务端配置CORS跨域规则，允许前端域名访问ES接口

方案三：给Node模块添加Polyfill（不推荐） #

如果一定要使用原有的@elastic/elasticsearch包，可以通过给缺失的Node模块添加浏览器兼容polyfill解决报错：

1. 安装缺失模块的浏览器polyfill：

npm install stream-http https-browserify os-browserify stream-browserify browserify-zlib

2. 在项目根目录的package.json中添加browser字段，标记Node原生模块在浏览器环境的替代规则：

{
  "browser": {
    "http": false,
    "https": false,
    "os": false,
    "stream": false,
    "zlib": false
  }
}

3. 在tsconfig.json的compilerOptions中添加路径映射，将Node模块指向对应的polyfill包：

{
  "compilerOptions": {
    "paths": {
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify/browser"],
      "stream": ["./node_modules/stream-browserify"],
      "zlib": ["./node_modules/browserify-zlib"]
    }
  }
}

该方案会增加打包体积，且可能存在未知的兼容性问题，仅做临时测试使用，不建议线上环境使用。

内容的提问来源于stack exchange，提问作者o.aboamer