Angular从7.3升级到13后出现白屏，控制台报process未定义如何解决

问题核心原因 #

你遇到的Uncaught ReferenceError: process is not defined错误，是Angular 12+版本不再默认向浏览器环境注入Node.js全局变量导致的，按以下步骤修复即可：

1. 优先修复process未定义错误 #

方案A：快速polyfill注入 #

在src/polyfills.ts文件末尾添加以下代码：

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

方案B：配合已安装的custom-webpack配置（更稳定） #

1. 在项目根目录新增webpack.config.js，内容如下：

const webpack = require('webpack');

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

2. 修改angular.json配置，替换默认构建器：
   找到projects.[你的项目名].architect.build字段，将builder改为@angular-builders/custom-webpack:browser，并在options下新增配置：

"customWebpackConfig": {
  "path": "./webpack.config.js"
}

再找到projects.[你的项目名].architect.serve字段，将builder改为@angular-builders/custom-webpack:dev-server

2. 消除无用文件编译警告 #

在tsconfig.app.json的exclude数组中添加未使用文件路径即可：

"exclude": [
  "test.ts",
  "**/*.spec.ts",
  "src/app/pre-analysis.ts",
  "src/app/resizable.directive.ts",
  "src/environments/environment.prod.ts"
]

如果上述文件实际有用，只需在对应业务模块中正常导入即可消除警告。

3. 修复其他错误配置与兼容问题 #

• 修改package.json中错误的build脚本：将"build": "ng serve"改为"build": "ng build"
• 升级依赖版本匹配Angular 13：
  • @angular/flex-layout升级到^13.0.0-beta.38
  • ngx-bootstrap升级到^8.0.0
  • @types/node升级到^16.0.0，匹配你本地的Node 16版本

4. 重启构建 #

删除node_modules和package-lock.json，重新执行npm i --legacy-peer-deps安装依赖后，执行ng serve即可正常运行。

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