Angular 12集成ldapts出现polyfill错误及process未定义问题如何解决

ldapts 是 Node.js 环境专用的 LDAP 客户端库，依赖 Node.js 内置的 net、tls、stream 等原生模块，浏览器环境没有这些模块的默认实现，仅配置 tsconfig 路径无法解决运行时缺失问题，修复步骤如下：

• 第一步：安装所有需要的 polyfill 依赖

npm install assert util stream-browserify process os-browserify browserify-net browserify-tls @angular-builders/custom-webpack@12 @angular-devkit/build-angular@12

• 第二步：项目根目录新建 webpack.config.js，添加如下配置

const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      util: require.resolve('util'),
      stream: require.resolve('stream-browserify'),
      net: require.resolve('browserify-net'),
      tls: require.resolve('browserify-tls'),
      os: require.resolve('os-browserify/browser'),
      fs: false
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
};

• 第三步：修改 angular.json 配置，替换默认构建器以加载自定义 webpack 配置
  找到 projects -> [你的项目名] -> architect -> build 节点，修改配置：

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

再找到 projects -> [你的项目名] -> architect -> serve 节点，修改配置：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // 保留原有的其他配置不变
}

• 第四步：删除 tsconfig.json 中之前添加的 paths 相关配置，webpack 已经完成模块 fallback 映射。

注意：即使完成上述配置，浏览器环境无法直接发起原始 TCP 请求，直接调用 ldapts 连接 LDAP 服务器还会遇到跨域、协议不支持的问题，更合理的方案是后端提供 LDAP 操作代理接口，前端仅调用后端接口完成 LDAP 账号验证、字段读取等操作，完全不需要引入 ldapts 及处理 polyfill 问题。

不存在适配 Angular 12 的开箱即用前端 LDAP 依赖包。所有公开的 JS 版 LDAP 客户端均为 Node.js 环境设计，浏览器端没有原生支持 TCP/TLS 底层连接的能力，无法实现纯前端的 LDAP 交互逻辑。

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