Angular5迁移Angular6后升级Elasticsearch客户端遇模块找不到错误

这个报错是因为Angular 6+使用的Webpack 4默认不再自动polyfill Node.js核心模块，而你升级后的Elasticsearch 14.2.2客户端依赖了Node环境的path模块，浏览器环境中并没有这个模块。下面提供两种可行的解决办法：

方法一：直接使用Elasticsearch的浏览器适配版本 #

Elasticsearch JS客户端本身提供了专门针对浏览器环境的构建版本，你可以直接修改代码中的导入路径来规避Node模块依赖：

• 找到你项目中导入Elasticsearch客户端的代码，将：

  import { Client } from 'elasticsearch';
  

  修改为：

  import { Client } from 'elasticsearch/browser';
  

这种方式不需要额外安装依赖或修改构建配置，是最简便的解决方案。

方法二：通过Webpack配置polyfill Node核心模块 #

如果方法一不适用（比如需要保留Node环境的兼容逻辑），可以通过配置Webpack来为浏览器环境提供path模块的polyfill：

1. 安装必要的依赖包：

   npm install path-browserify @angular-builders/custom-webpack --save-dev
   

2. 在项目根目录创建webpack.config.js文件，添加以下配置：

   module.exports = {
     resolve: {
       alias: {
         'path': require.resolve('path-browserify')
       }
     }
   };
   

3. 修改angular.json文件，更新构建和开发服务的配置：
   • 找到projects -> [你的项目名称] -> architect -> build，将builder改为@angular-builders/custom-webpack:browser，并添加customWebpackConfig配置：

     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有的其他配置（如outputPath、index、main等）
       }
     }
     

   • 同样，找到architect -> serve，将builder改为@angular-builders/custom-webpack:dev-server，并添加相同的customWebpackConfig配置：

     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有的其他配置
       }
     }
     

4. 重新启动项目：

   npm start
   

完成以上步骤后，Webpack会在构建时用path-browserify替代原生的path模块，从而解决编译错误。

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