Angular - Webpack definePlugin 变量未定义答案

【问题标题】：Angular - Webpack definePlugin variable is not definedAngular - Webpack definePlugin 变量未定义
【发布时间】：2021-09-27 14:25:31
【问题描述】：

我正在尝试通过 Webpack 的 definePlugin 将变量注入到我的代码中。

在阅读了许多帖子之后，似乎没有任何效果。我觉得我错过了什么......

我的 webpack 配置是 -

webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      $TEST: JSON.stringify(true),
      $ENV: {
        ENVIRONMENT: JSON.stringify(process.env.ENVIRONMENT) || 'localhost',
        API_URL: JSON.stringify(process.env.API_URL)
      }
    })
  ]
};

我创建了typing.d.ts 文件来声明变量：

declare let $ENV: Env;
declare let $TEST: boolean;

interface Env {
  ENVIRONMENT: string;
  API_URL: string;
}

然后我尝试在我的 main.ts 文件中记录变量：

console.log('Test ' + $TEST);
console.log('Environment :', $ENV.ENVIRONMENT);

但我在启动“ng serve”命令时收到下一个错误

我正在使用：

webpack：5.54.0
"@angular-builders/custom-webpack": "^12.1.2",
"@angular-devkit/build-angular": "~12.2.7",
"@angular/cli": "~12.2.7",

请问有人有办法解决吗？

【问题讨论】：

标签： angular webpack

【解决方案1】：

这仅适用于ng build，对于ng serve，我们需要在我们的 angular.json 中添加另一个自定义 angular-builder：

"serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },

重要的是，其他一些帖子提到使用@angular-builders/dev-server:generic builder。

但是这个已经被弃用了（见angular-builders migration）

@angular-builders/dev-server:generic 已被弃用。采用 @angular-builders/custom-webpack:dev-server 代替。

【讨论】：