Angular 部署问题 - 使用 Dotenv 和 Environment.ts Netlify 环境变量

Angular Deployment Issue - Netlify Environment Variables with Dotenv and Environment.ts

提问人:Aaront028 提问时间:10/19/2023 更新时间:10/19/2023 访问量:68

问:

我在尝试了 dotenv 和 environment.ts 方法后,在我的 Angular 应用程序中访问 Netlify 环境变量时遇到了挑战。

这是我environment.ts文件中的一个片段:

export const environment = {
  production: true,
  apiUrl: 'API_URL',
  hasuraAdminSecret: 'HASURA_ADMIN_SECRET',
};

在 graphql.module.ts 服务文件中,我使用了 dotenv 来访问环境变量:

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

const uri = process.env.API_URL || 'default-api-url';
const adminSecret = process.env.HASURA_ADMIN_SECRET || 'default-admin-secret';

但是,我在这两种方法中都遇到了问题。使用 dotenv 时,存在 polyfill 错误,并且传统的 environment.ts 方法不会显示 Netlify 环境变量的实际值。控制台 .log 输出仅显示变量名称,而不显示值。

我认为Netlify环境变量设置正确。我希望有人能够帮助我解决这个问题。如果您有关于在 Netlify 上的 Angular v16 中使用 dotenv 或 environment.ts 的见解或指导,我们将不胜感激。仅供参考,我正在运行带有以下依赖项的 Apollo 和 GraphQl

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@ngxs/devtools-plugin": "^3.8.1",
    "@ngxs/store": "^3.8.1",
    "apollo-angular": "^5.0.2",
    "apollo-angular-link-http": "^1.11.0",
    "apollo-link-ws": "^1.0.20",
    "auto-i18n": "^1.0.0",
    "dotenv-webpack": "^8.0.1",
    "google-translate-api": "^2.3.0",
    "graphql": "^15.8.0",
    "keycloak-angular": "^14.1.0",
    "keycloak-js": "^22.0.4",
    "rxjs": "~7.8.0",
    "subscriptions-transport-ws": "^0.9.19",
    "terser": "^5.22.0",
    "translate": "^2.0.2",
    "translate-google": "^1.5.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^16.0.1",
    "@angular-devkit/build-angular": "^16.2.5",
    "@angular/cli": "^16.2.5",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^20.8.6",
    "dotenv": "^16.3.1",
    "env-cmd": "^10.1.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }

谢谢!

angular 环境变量 apollo-client netlify dotenv

评论


答: 暂无答案