Angular Builder无法更新及自定义Webpack Dev Server配置求助

问题场景 #

按照《how to use process.env in Angular》教程修改angular.json配置后，运行ng serve时触发以下错误：

An unhandled exception occurred: Cannot find module '@angular-builders/custom-webpack/dist/package.json'

当前angular.json相关配置 #

build部分：

"build": {
  "builder": "@angular-builders/custom-webpack/dist:browser",
  "options": {
    "customWebpackConfig": {
      "path": "src/custom-webpack.config.ts"
    },
    "outputPath": "dist/fitness-proj",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": [
      "zone.js"
    ],
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
},

serve部分：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "FitnessProj:build:production"
    },
    "development": {
      "browserTarget": "FitnessProj:build:development"
    }
  },
  "defaultConfiguration": "development"
},

疑问 #

1. 每当修改"builder"字段值后，运行ng serve或ng update都会出现上述错误，是否需要额外操作才能更新Builder？
2. 已安装的@angular-builders/custom-webpack目录结构如下，想使用其中的custom webpack dev server，且不清楚如何配置"builder"及相关部分以实现process.env生效：

└── @angular-builders/
    └── custom-webpack/
        ├── dist/
        │   ├── browser/
        │   │   └── // a bunch of files
        │   └── dev-server/
        │       └── // a bunch of files
        ├── node_modules
        ├── builders.json
        └── package.json

解决方案 #

问题1：Builder路径错误及更新操作 #

• 错误根源：你配置的builder路径@angular-builders/custom-webpack/dist:browser不符合Angular Builder的引用规范，正确格式应为包名:builder标识符，不需要带dist路径。
• 操作步骤：修改builder字段后无需特殊更新操作，但建议先确保依赖包安装正常，执行以下命令重装依赖：

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

问题2：配置自定义Webpack Dev Server及实现process.env生效 #

1. 修正angular.json中的Builder配置

将build和serve的builder字段改为正确的标识符：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  // 保留原有options、configurations等配置
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "FitnessProj:build:production"
    },
    "development": {
      "browserTarget": "FitnessProj:build:development"
    }
  },
  "defaultConfiguration": "development"
}

2. 配置自定义Webpack文件注入环境变量

在src/custom-webpack.config.ts中添加Webpack的DefinePlugin，将环境变量注入到应用中：

import { Configuration } from 'webpack';
import webpack from 'webpack';

// 若需从.env文件加载变量，先执行npm install dotenv --save-dev，再添加下面一行
// require('dotenv').config();

export default {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify({
        // 在这里定义你的环境变量，示例：
        API_URL: JSON.stringify(process.env.API_URL || 'http://localhost:3000')
      })
    })
  ]
} as Configuration;

3. 解决TypeScript类型提示问题

在tsconfig.app.json的compilerOptions.types中添加node，避免process.env的类型错误：

{
  "compilerOptions": {
    // 其他配置
    "types": ["node"]
  }
}

4. 验证配置

运行ng serve后，即可在Angular组件中直接使用process.env.API_URL等环境变量。

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