在我的 Angular 应用程序中使用 npm start 命令在命令行上设置环境变量

Question

我想用npm start 命令设置一些环境变量，比如npm start apiUrl=http://localhost:5000。 我希望这些变量的值在我的 environment.ts

中设置属性

我对节点有非常基本的了解，因此我的问题可能不正确。

我已经安装了 dotenv，我的 package.json 是：

{
  "name": "####",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "config": "ts-node set-env.ts",
    "start": "npm run config && ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "server": "npm run config && ng serve --port $PORT"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.4",
    "@angular/common": "~10.0.4",
    "@angular/compiler": "~10.0.4",
    "@angular/core": "~10.0.4",
    "@angular/forms": "~10.0.4",
    "@angular/platform-browser": "~10.0.4",
    "@angular/platform-browser-dynamic": "~10.0.4",
    "@angular/router": "~10.0.4",
    "bootstrap": "^3.4.1",
    "dotenv": "^8.2.0",
    "named-regexp-groups": "^1.0.5",
    "rxjs": "~6.6.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.3",
    "@angular/cli": "^10.0.3",
    "@angular/compiler-cli": "~10.0.4",
    "@angular/language-service": "~10.0.4",
    "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
    "@types/crypto-js": "^3.1.43",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.9.7"
  }
}

更新

这是 set-env.ts 文件。我已经写信来更新我的 environment.ts 文件，但正如我上面提到的，我找不到任何使用命令更新 process.env 属性的解决方案。

 const fs = require('fs');

const defaultEnvironmentFile = require('./src/environments/environment.default.ts');

const writeFile = fs.writeFile;

const targetPath = './src/environments/environment.ts';
const sourcePath = './src/environments/environment.default.ts';
require('dotenv').config();

let content = [];

for (let key in defaultEnvironmentFile) {
    if (process.env[key] !== undefined) {
        if (typeof defaultEnvironmentFile[key] === 'string') {
            content.push(`'${key}: ${process.env[key]}'`);
        }
        else {
            content.push(`${key}: ${process.env[key]}`);
        }
    }
    else {
        if (typeof defaultEnvironmentFile[key] === 'string') {
            content.push(`${key}: '${defaultEnvironmentFile[key]}'`);
        }
        else {
            content.push(`${key}: ${defaultEnvironmentFile[key]}`);
        }
    }

}

let runtimeEnvironment = `export const environment = { \r\n\t${content.join(',\r\n\t')}\r\n};`;

writeFile(targetPath, runtimeEnvironment, function (err) {
    if (err) {
        throw console.error(err);
    }
});

Answer 1

这可以通过使用自定义 webpack 构建器并将 ng serve 作为子进程调用并将环境变量传递给子进程来完成。

Here is a step by step guide 解释了如何做到这一点：

import * as yargs from 'yargs';
import { spawn } from 'child_process';
import { DEFAULT_APP_ENV } from './app-env';

const parseNgArgs = () => process.argv.filter((arg, index) => index > 1 && Object.keys(DEFAULT_APP_ENV).every(key => !arg.includes(key)));

const ngArgs = parseNgArgs();

const argv = { ...DEFAULT_APP_ENV, ...yargs.argv};

const childProcess = spawn('yarn', ['start', ...ngArgs], {
  stdio: 'inherit',
  env: { ...process.env, APP_ENV: JSON.stringify(argv) },
  shell: true,
});

使用它，您可以像这样传入任何命令行环境变量，并在运行时在您的 Angular 中访问它们

yarn serve --logErrors --no-runtimeChecks --loggerHost="http://localhost:6000"