如何在Angular中访问Firebase App Hosting环境变量？

针对你在apphosting.yaml中配置的MY_KEY这类关联Secret的授权令牌变量，Angular无法直接用process.env访问（客户端环境不存在process对象），以下是两种可行的实现方案：

方案一：构建时注入环境变量（推荐） #

利用Firebase App Hosting部署时会将apphosting.yaml中的env变量暴露给构建流程的特性，通过脚本将变量写入Angular的环境文件：

1. 创建环境变量替换脚本
   在项目根目录新建set-env.js文件，内容如下：

const fs = require('fs');
const targetEnvFile = './src/environments/environment.prod.ts';

fs.readFile(targetEnvFile, 'utf8', (readErr, data) => {
  if (readErr) return console.error('读取环境文件失败:', readErr);
  
  // 替换environment.prod.ts中的MY_KEY占位符
  const updatedContent = data.replace(/MY_KEY: '.*'/, `MY_KEY: '${process.env.MY_KEY}'`);
  
  fs.writeFile(targetEnvFile, updatedContent, 'utf8', writeErr => {
    if (writeErr) return console.error('写入环境文件失败:', writeErr);
  });
});

2. 修改构建脚本
   在package.json中更新生产构建命令，先执行脚本再构建：

{
  "scripts": {
    "build:prod": "node set-env.js && ng build --configuration production"
  }
}

3. 配置环境文件占位符
   确保src/environments/environment.prod.ts中有对应的占位符：

export const environment = {
  production: true,
  MY_KEY: '' // 构建时会被脚本替换为实际值
};

4. 在Angular中访问变量
   在组件或服务中导入环境文件即可使用：

import { environment } from '../environments/environment';

// 使用变量
console.log(environment.MY_KEY);

方案二：通过index.html注入全局变量 #

如果不需要构建时处理，可直接在index.html中注入全局变量，Firebase Hosting会自动替换占位符：

1. 修改index.html
   在<head>标签内添加脚本，用%变量名%作为占位符：

<script>
  window.MY_KEY = '%MY_KEY%';
</script>

2. 添加类型声明（可选）
   为避免TypeScript类型报错，在src/typings.d.ts中添加全局变量声明：

declare global {
  interface Window {
    MY_KEY: string;
  }
}
export {};

3. 在Angular中访问变量
   直接通过window.MY_KEY访问即可：

// 在组件中使用
const authToken = window.MY_KEY;

注意事项 #

• 敏感变量（如授权令牌）必须通过Firebase Secret Manager配置，避免在apphosting.yaml中明文存储。
• 构建时注入的方式变量会被打包进应用代码，index.html注入的方式变量会在页面源码中可见，根据实际场景选择。

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