Angular 15集成Voice JavaScript SDK报错process未定义，无polyfills.ts如何解决？

因为Angular 15已移除polyfills.ts文件，你可以通过以下几种方式解决Voice JavaScript SDK依赖process对象的问题：

方法一：直接在应用入口注入process #

这是最简单的方案：

1. 先安装process包：

npm install process --save

2. 在src/main.ts文件顶部添加以下代码：

import * as process from 'process';
(window as any).process = process;

启动应用后，process对象会被挂载到浏览器的window全局对象中，满足SDK的依赖需求。

方法二：通过自定义Webpack配置提供process #

如果不想修改入口文件代码，可以通过扩展Webpack配置实现：

1. 安装自定义Webpack构建工具：

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

2. 在项目根目录创建webpack.config.js文件，内容如下：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ],
};

3. 修改angular.json中的构建配置：
   • 找到projects -> [你的项目名称] -> architect -> build，将builder字段从@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser
   • 在options中添加自定义Webpack配置路径：

     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留原有其他配置项
     }
     

   • 同样，将architect -> serve下的builder替换为@angular-builders/custom-webpack:dev-server

方法三：仅注入所需的环境变量（按需使用） #

如果SDK仅依赖process.env中的特定变量，而非整个process对象，可以直接在环境文件中定义：

1. 在src/environments/environment.ts中添加需要的变量：

export const environment = {
  production: false,
  // 添加SDK需要的变量
  SDK_API_KEY: 'your-api-key'
};

2. 在应用中导入环境变量并挂载到window：

import { environment } from './environments/environment';
(window as any).process = { env: environment };

注意：此方案仅适用于SDK对process的依赖较为简单的场景，若SDK深度依赖process的其他属性，建议使用前两种方法。

内容的提问来源于stack exchange，提问作者Chandan Ankush Gauns