Angular项目使用Webpack DefinePlugin注入变量提示未定义报错如何解决

修复方案 #

1. 修正angular.json构建配置
   使用@angular-builders/custom-webpack必须替换默认构建器，否则自定义webpack配置不会生效：
   找到angular.json中对应项目的配置：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          // 替换默认builder
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            // 新增自定义webpack配置路径，和你的实际文件路径对应
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 其余原有配置保持不变
          }
        },
        "serve": {
          // 也要替换serve的builder
          "builder": "@angular-builders/custom-webpack:dev-server",
          // 其余原有配置保持不变
        }
      }
    }
  }
}

修改完成后必须重启ng serve生效。

2. 修正DefinePlugin配置写法
   你当前的配置存在两个问题：

• 嵌套对象的格式不符合DefinePlugin要求，易导致注入失败
• process.env判断逻辑位置错误，JSON.stringify(undefined)会得到字符串"undefined"为真值，永远不会 fallback 到localhost
  修正后的webpack配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      $TEST: JSON.stringify(true),
      // 直接序列化整个$ENV对象，写法最稳妥不会出错
      $ENV: JSON.stringify({
        ENVIRONMENT: process.env.ENVIRONMENT || 'localhost',
        API_URL: process.env.API_URL || ''
      })
    })
  ]
};

3. 确保TypeScript类型声明被正确识别
   确认typing.d.ts文件路径已经加入到tsconfig.app.json的include数组中，示例：

{
  "include": [
    "src/**/*.ts",
    "src/typing.d.ts" // 按你实际的typing.d.ts存放路径填写
  ]
}

4. 确保环境变量注入到Node进程
   本地运行ng serve时Node进程默认不会加载自定义环境变量，两种方案可选：

• 安装cross-env包，启动时传入变量：cross-env ENVIRONMENT=dev API_URL=https://你的接口地址 ng serve
• 安装dotenv-webpack插件，在webpack配置中加载.env文件内的变量，无需每次启动手动传参。

内容的提问来源于stack exchange，提问作者Geoffrey Lalloué