每个环境使用不同的环境配置 | Angular 打字稿

Question

在 Angular 中，我想为每个环境使用不同的环境配置。

这意味着，如果我部署到开发环境，我希望 Angular 应用程序使用开发变量，如果我部署到生产环境，我希望 Angular 使用生产环境变量。

有办法吗？例如，创建一个包含所有变量的文件，然后 Angular 只需查看它所在的环境并选择正确的变量。

Answer 1

只需在项目根目录中创建一个新的 typescript 文件，与 pacakage.json 文件所在的目录相同，假设您创建了一个名称为 set-env.ts 的文件将此代码放入文件

import { writeFile } from 'fs';
// Configure Angular `environment.ts` file path
const targetPath = './src/environments/environment.ts';
const targetPathProd = './src/environments/environment.prod.ts';
const envConfigFile = `export const environment = {
   production: false,
   serverURL: 'https://devenviroment.com/api',
   someOtherProperty: 'response'
};
`;
const envProdConfigFile = `export const environment = {
   production: true,
   serverURL: 'https://serverurlproduction.com/api',
   someOtherProperty: 'value'
};
`;
console.log('The file `environment.ts` will be written with the following content: \n');
console.log(envConfigFile);
writeFile(targetPath, envConfigFile, function (err) {
  if (err) {
    throw console.error(err);
  } else {
    console.log(`Angular environment.ts file generated correctly at ${targetPath} \n`);
  }
});
writeFile(targetPathProd, envProdConfigFile, function (err) {
  if (err) {
    throw console.error(err);
  } else {
    console.log(`Angular environment.prod.ts file generated correctly at ${targetPath} \n`);
  }
});

现在将此行添加到脚本标签内的 package.json 文件中

"config-env": "ts-node set-env.ts",
"build": "ng build"

现在，当您构建项目时，您可以简单地使用此命令

npm run config-env & npm run build

npm 运行 config-env 命令将使用您在 set-env.ts

中编写的配置覆盖您的环境文件

每个环境使用不同的环境配置 | Angular 打字稿

Use different env configs per environment | Angular Typescript

variables

environment

config

angular