角NG建立与不同的“轮廓”

Question

在Maven中（Java）的存在是建立一个可能性，例如，用不同的“轮廓” web应用程序的战争中，“个人资料”，表示例如Web服务的URL放在配置文件中。 因此，“测试配置文件”将指示一个不同于“生产配置文件”的URL。

是否有类似ng的配置文件？

Answer 1

在与角CLI创建的每一个项目，你有一个environment.ts和出口对象与所谓的生产boolean类型的属性的environment.production.ts文件。

在第一个文件中，它被设置为false，并且在生产文件中为true。主叫纳克构建时

第一文件由默认由角-CLI。

如果你想使用你必须调用NG建立--env =督促生产文件。

使用它在config.ts文件

在config.ts文件，你可以问布尔的环境文件出口的状态。

例如：

import { environment } from 'environments/environment'; 

export class Config { 
    public static get webApiUrl() { 
     if (environment.production) { 
      return 'https://testapi.be'; 
     } 
     return 'http://localhost:60000'; 
    } 
} 

创建自己的环境

你可以通过调用它environment.your_environment.ts创建自己的环境文件。

然后，你必须添加一个布尔属性your_environment并把它添加到所有其他文件，并只将其设置为true，在您的文件。

在这之后，你必须将它添加到在部分环境中的角cli.json文件：“your_environment”：“环境/ environment.your_environment.ts”。

使用ng build --env = your_environment，您可以使用该文件。

import { environment } from 'environments/environment'; 

export class Config { 
    public static get webApiUrl() { 
     if (environment.production) { 
      return 'https://productionapi.be'; 
     } 
     if (environment.your_environment) { 
      return 'https://testapi.be'; 
     } 
     return 'http://localhost:60000'; 
    } 
} 

Answer 2

假设你正在使用角度CLI，附带的WebPack。我能想到的最接近的事是'角cli.json配置定义环境

- 创建一个公共枚举您的环境/文件夹下的配置文件app

export enum Env { 
    Development, 
    Acceptance, 
    Production 
} 

这是完全没有必要，而且有利于工作的同时，在配置上。我们将以此作为一个配置文件的区别

- 创建一个新的环境配置文件名为environment.acc.ts和environment.dev.tssrc\environments文件夹下有适当的配置

environment.dev.ts -

import { Env } from 'app/env.enum'; 
export const environment = { 
    production: false, 
    env: Env.Development 
}; 

environment.acc.ts -

import { Env } from 'app/env.enum'; 
export const environment = { 
    production: false, 
    env: Env.Acceptance 
}; 

environment.prod.ts -

import { Env } from 'app/env.enum'; 
export const environment = { 
    production: true, 
    env: Env.Production 
}; 

-Update angular-cli.json提供的配置。

{ 
    "project": { 
    "version": "1.1.2", 
    "name": "angular-app" 
    }, 
    "apps": [ 
    { 
     . 
     . //////config removed for sanity////// 
     . 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.dev.ts", 
     "prod": "environments/environment.prod.ts", 
     "acc": "environments/environment.acc.ts", 
     } 
    } 
    ] 
    . 
    . 
    . 
    . //////config removed for sanity////// 
} 

现在，您可以在整个应用程序中使用environment.env变量访问环境。

您可以编写一个根据环境而变化的配置。

例 -

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

export class Config { 
    public static get getConfigurationEndpoints() { 
     if (environment.env.Production) { 
      return 'https://xyz.azurewebsites.net/api'; 
     } 
     else if (environment.env.Acceptance) { 
      return 'https://xyzacc.azurewebsites.net/api'; 
     } 
     else { 
      return 'http://localhost:8555/api'; 
     } 
    } 
} 

现在，只需建立/服务与构建参数的应用程式，例如下面

ng serve --environment "acc" ng serve --environment "prod"

注意考虑到这是不是唯一方式实现它。但是，对于我们的这种应用，我们更喜欢这种配置转换方法。