Angular17 SSR项目：寻找等效application构建器及环境变量隐藏方案

需求背景 #

需要隐藏Angular应用构建文件中的环境变量，原本计划通过@angular-builders/custom-webpack + dotenv实现，但当前使用的是@angular-devkit/build-angular:application构建器（支持CSR/SSR），而@angular-builders/custom-webpack暂无对应该构建器的适配版本，因此需要替代方案。

项目基础信息 #

• Angular版本：17.3.0
• SSR状态：已启用
• 当前构建器：@angular-devkit/build-angular:application

方案1：无需第三方构建器，原生Angular CLI结合自定义Webpack配置 #

步骤说明 #

1. 安装依赖
   安装dotenv用于加载.env文件：

   npm install dotenv --save-dev
   

2. 创建自定义Webpack配置文件
   在项目根目录新建webpack.config.js，内容如下：

   const dotenv = require('dotenv');
   const webpack = require('webpack');
   
   module.exports = () => {
     // 根据环境加载对应.env文件
     const envPath = process.env.NODE_ENV === 'production' ? '.env.prod' : '.env';
     const envConfig = dotenv.config({ path: envPath });
     if (envConfig.error) throw new Error('Failed to load .env file');
   
     // 转换为Webpack DefinePlugin可识别的格式
     const envVariables = Object.keys(envConfig.parsed).reduce((acc, key) => {
       acc[`process.env.${key}`] = JSON.stringify(envConfig.parsed[key]);
       return acc;
     }, {});
   
     return {
       plugins: [new webpack.DefinePlugin(envVariables)]
     };
   };
   

3. 修改angular.json配置
   在build的options中添加自定义Webpack配置引用：

   "build": {
     "builder": "@angular-devkit/build-angular:application",
     "options": {
       // 保留原有所有配置...
       "customWebpackConfig": {
         "path": "./webpack.config.js",
         "mergeStrategies": {
           "plugins": "append"
         }
       }
     },
     // 保留原有configurations配置...
   }
   

4. 配置.env文件
   在项目根目录创建.env（开发环境）和.env.prod（生产环境）文件，示例：

   # .env
   API_BASE_URL=https://dev-api.example.com
   APP_SECRET=dev-secret-123
   

   # .env.prod
   API_BASE_URL=https://prod-api.example.com
   APP_SECRET=prod-secret-456
   

   记得将这两个文件添加到.gitignore，避免提交到版本库。

5. 代码中使用环境变量
   在src/environments/environment.ts及environment.prod.ts中引用：

   // environment.ts
   export const environment = {
     production: false,
     apiBaseUrl: process.env.API_BASE_URL,
     appSecret: process.env.APP_SECRET
   };
   

   构建时Webpack会将process.env.xxx替换为实际的环境变量值，不会在最终产物中暴露原始变量名。

方案2：使用支持Application构建器的替代构建器 #

如果需要更灵活的Webpack扩展能力，可以使用@nx/webpack构建器（适配Angular 17的Application模式）：

步骤说明 #

1. 安装依赖

   npm install @nx/webpack --save-dev
   

2. 替换angular.json中的构建器
   将build的builder替换为@nx/webpack:webpack，并配置相关参数：

   "build": {
     "builder": "@nx/webpack:webpack",
     "options": {
       "outputPath": "dist/my-web-application",
       "index": "src/index.html",
       "main": "src/main.ts",
       "tsConfig": "tsconfig.app.json",
       "assets": ["src/favicon.ico", "src/assets"],
       "styles": ["src/styles.scss"],
       "server": "src/main.server.ts",
       "ssr": true,
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       }
     },
     "configurations": {
       "production": {
         // 保留原有生产配置，指定环境标识
         "environment": "prod"
       }
     }
   }
   

3. 复用方案1的Webpack配置与.env文件
   直接使用方案1中的webpack.config.js、.env和.env.prod文件即可实现环境变量注入。

SSR环境补充说明 #

对于SSR服务端代码，可在server.ts顶部直接加载.env文件，确保服务端能读取到环境变量：

require('dotenv').config({ path: process.env.NODE_ENV === 'production' ? '.env.prod' : '.env' });

// 后续服务端代码...

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