[英]How can I set environment variables in my Javascript file rather than the command line?
[英]Set environment variables on command line with npm start command in my angular app
我想使用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);
}
});
这可以通过使用自定义 webpack 构建器并调用ng serve
作为子进程并将环境变量传递给子进程来完成。
这是一个分步指南,解释了如何完成此操作:
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"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.