Angular 11升级至12后编译成功但浏览器无法加载，报process未定义

这个错误是因为Angular 12使用Webpack 5，不再默认在浏览器环境中注入Node.js的process全局变量，而你的应用或依赖库仍在尝试访问它。以下是几种可行的解决方法：

方法1：通过自定义Webpack配置注入process变量 #

• 安装自定义Webpack构建工具：

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

• 在项目根目录创建webpack.config.js，添加以下内容：

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

• 修改angular.json中的构建配置：
  找到projects -> [你的项目名称] -> architect -> build，将builder改为@angular-builders/custom-webpack:browser，并添加customWebpackConfig配置：

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

• 同样修改serve配置的builder为@angular-builders/custom-webpack:dev-server

方法2：在polyfills中手动定义process变量 #

这是最简单的临时解决方式，适合快速验证：

• 打开src/polyfills.ts，添加以下代码：

  (window as any).process = {
    env: { NODE_ENV: 'development' }
  };
  

如果你的应用需要更多环境变量，可以在env对象中补充对应的键值对。

方法3：检查并升级依赖库 #

从错误栈来看，问题出在dropdown-menu.component.ts相关的代码，大概率是你使用的UI组件库（如ng-bootstrap、PrimeNG等）尚未兼容Angular 12/Webpack 5：

• 运行npm outdated查看所有过期依赖
• 升级相关组件库到支持Angular 12的版本：

  npm update [组件库名称]
  

完成上述操作后，重启本地开发服务器，检查控制台错误是否消失，页面是否正常渲染。

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