Environment.ts

Question

我需要将后端网址传递给我的Angular2应用，因为生产和开发服务器托管在不同的位置。

我知道我可以在外部config.json中存储这些东西并在启动时加载。但是，在应用程序启动之前，这似乎是对服务器的不必要的额外调用。

或者，我现在所做的是创建一个全局变量，我根据构建注入gulp。我的应用程序不是需要可重用的库我不相信我应该点击意外的全局名称冲突。但这不是一个好习惯。

我想知道是否有第三种更好的解决方案？

Answer 1

只需将变量放在环境对象中即可。

export const environment = {
  production: false,
  url: 'http://localhost:3000/api'
};

之后，您可以导入并使用它。 Angular Cli将自动交换文件。

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

P.S。变量在环境对象中可用。

this.url = environment.url

Answer 2

我也一直在努力解决上述问题。虽然蒂埃里的答案非常好，但我觉得它太复杂了，因为我只是想要用env vars，所以我觉得我也提出了自己的想法。

1）我首先创建了一个描述我的env vars app.settings.ts的界面：

export interface IEnvVars {
    ENV: string;
    API_URL: string;
}

export class AppSettings {
    public static env_vars: IEnvVars;
}

2）I added the JavaScript fetch API type definitions to my .d.ts file.（如果您不介意将抓取解析为未解决的问题，则不一定需要，但我确实介意了，所以添加了类型）

3）所以现在我的main.ts我可以调用返回环境变量的端点：

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {AppSettings,IEnvVars} from "./configs/app.settings";
import {enableProdMode} from "angular2/core";

fetch('/env-vars', {method: 'get'}).then((response) => {
    response.json().then((env_vars:IEnvVars) => {
        AppSettings.env_vars = env_vars;
        if (AppSettings.env_vars.ENV != 'development') enableProdMode();
        bootstrap(AppComponent);
    });
});

所以现在我只需通过以下方式访问任何服务或组件中的env变种：

import {AppSettings} from "../configs/app.settings";

所以在一个方法等中你可以像：

let customersURL = `${AppSettings.env_vars.API_URL}/customers`;

请注意，您可能需要使用polyfill进行fetch API，因为Safari和IE仍然不支持此功能。（Link to polyfill exampel）

Answer 3

我认为这对你有用。 Passing asp.net server parameters to Angular 2 app

这样你可以从html页面注入任何值（可以从服务器获取值，比如当前的环境变量）

Answer 4

我使用以下方法实现了这一点：

为每个环境创建ts个文件。
修改了package.json并为脚本部分中的每个环境添加了一个新条目。

例如： -

＆＃34;开始：本地＆＃34;：＆＃34;复制\＆＃34; config / config.local.ts \＆＃34; \＆＃34;常量/ global.constants.ts \＆＃34; ＆安培;＆安培; npm run start＆＃34;

将global.constants导入您的应用。
您可以使用以下命令启动HTTP服务器：npm run start:local

Answer 5

不仅URL，而且还需要从环境变量中获取其他一些参数。

必须在 build 之前获取环境变量并将其写入call！由于在运行时访问文件系统，环境等方面存在一些Javascript限制。

为此，首先需要一个用于编写环境变量的模块，并且必须在environment.ts脚本中使用ts-node来执行此模块：

build

和您的"scripts": { ..... "config": "ts-node set-env.ts", "build": "npm run config && ng build", .... },文件：

set-env.ts

当然，您必须将var fs = require('fs'); const targetPath = './src/environments/environment.ts'; const colors = require('colors'); require('dotenv').load(); const envConfigFile = `export const environment = { ENV_VAR_1: '${process.env.var_1}', ENV_VAR_n: '${process.env.var_n}', };`; console.log(colors.magenta('The content of `environment.ts` will be: \n')); console.log(colors.grey(envConfigFile)); fs.writeFile(targetPath, envConfigFile, function (err) { if (err) { throw console.error(err); } else { console.log(colors.magenta(`environment.ts file is created`)); } });和ts-node添加到依赖项中。

，您可以轻松访问environemnt.ts的变量，例如：

dotenv

Node 12 ^，Angular 10 ^，我没有使用较旧的Node / Angular / Typescrip版本进行检查

Answer 6

在不同的环境中，location.host的值会有所不同。

将此作为键使用，并加载具有所有网址的相应json的值。

Environment.ts

使用方法

您在Angular2 +中有一个内置的系统。
每个处理的环境都有 environement.ts个文件（您可以根据需要定义任意数量）。
每当您需要访问它们时，都可以这样导入

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

并在代码中访问变量

environement.varName

如何配置自定义环境。

在angular.json文件中，您可以根据需要创建任意数量的环境，这是一个示例

"build": 
{ "configurations": 
{ 
"production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], }, 

"qa": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.qa.ts" } ] }, 

"staging": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.staging.ts" } ] } } }

在构建应用程序时，您需要提及要为其构建环境的名称。在这里的一个示例中，我为 qa 环境构建了一个版本。

ng build --configuration qa

完成后，您的 dist 输出文件夹应包含具有 qa 配置的构建输出

将环境变量传递给Angular2应用程序？

7 个答案:

Environment.ts

使用方法

如何配置自定义环境。