Angular 16+中ReferenceError: process is not defined问题解决方法咨询

方法一：直接导入package.json（推荐） #

这种方式无需依赖process对象，适配Angular当前构建逻辑：

• 在tsconfig.json的compilerOptions中添加配置，允许TypeScript导入JSON文件：

"compilerOptions": {
  // 其他原有配置
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true
}

• 在需要获取版本的组件或服务中直接导入使用：

import packageJson from '../package.json';

const appVersion = packageJson.version;

• 若构建时出现CommonJS依赖提示，在angular.json的build配置里，将package.json加入allowedCommonJsDependencies数组：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他原有配置
    "allowedCommonJsDependencies": ["../package.json"]
  }
}

方法二：通过构建工具注入环境变量 #

如果坚持使用process.env的方式，需要在构建阶段注入实际变量值：

针对ESBuild（Angular 16+默认构建工具） #

1. 项目根目录创建esbuild.config.js文件：

export default {
  define: {
    'process.env.npm_package_version': JSON.stringify(require('./package.json').version)
  }
};

2. 修改angular.json的build配置，指定ESBuild配置文件路径：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他原有配置
    "esbuildConfig": "./esbuild.config.js"
  }
}

3. 代码中直接调用变量：

const appVersion = process.env.npm_package_version;

针对自定义Webpack配置（若项目仍使用Webpack） #

1. 安装自定义Webpack构建器：

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

2. 创建webpack.extra.js文件：

const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.npm_package_version': JSON.stringify(packageJson.version)
    })
  ]
};

3. 修改angular.json的build和serve配置，替换构建器并指定自定义配置：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.extra.js"
    },
    // 其他原有配置
  }
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // 其他原有配置
}

无效原因说明 #

• Angular 16移除了默认的polyfills.ts文件，旧的polyfill方案已失效。
• 直接在index.html中定义空的process对象，并未注入实际的版本变量值，所以会出现版本为空的情况。

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