Question

在Maven（Java）中，有可能构建一个webapp战争，其中包含不同的＆＃34;配置文件＆＃34;，＆＃34; profile＆＃34;指示例如要放入配置文件中的Web服务的URL。因此，＆＃34;测试配置文件＆＃34;将指示与＆＃34;生产配置文件＆＃34;。

不同的网址

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

Answer 1

在使用angular-cli创建的每个项目中，您都有一个environment.ts和一个environment.production.ts文件，该文件使用boolean类型的属性导出一个名为production的对象。

在第一个文件中，它设置为false，在生产文件中设置为true。

在调用ng build时，angular-cli默认使用第一个文件。

如果您想使用生产文件，您必须调用ng build --env = prod。

在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。

在此之后，您必须将其添加到部分环境中的angular-cli.json文件中：＆＃34; your_environment＆＃34;：＆＃34; environments / environment.your_environment.ts＆＃34;。

使用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

对于 Angular 6 + ：

为environments文件夹中的每个配置文件创建文件：

environments/environment.ts
environments/environment.prod1.ts
environments/environment.prod2.ts

并在每个文件中放入相应配置文件的参数：

export const environment = {
  production: true,
  serverUrl: "http://prod1.site.com"
};

您可以像这样在组件/服务内部访问参数：

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

@Injectable()
export class SomeService {
  SERVER_URL: string = environment.serverUrl;

并在angular.json下的configurations内添加新的配置文件环境：

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

最后在构建应用程序时选择配置文件：

ng build --configuration = prod1

Answer 3

假设您使用的是Angular CLI，它随 webpack 一起提供。我能想到的最近的事情是在`angular-cli.json config

中定义环境

使用文件夹app

下的环境/配置文件创建公开枚举

export enum Env {
  Development,
  Acceptance,
  Production
}

这绝对没有必要，但在处理配置时会有所帮助。我们将此用作配置文件区分器

使用适当的配置在environment.acc.ts文件夹下创建一个名为environment.dev.ts和src\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
};

- 使用提供的配置更新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"

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

Answer 4

仅是对使用angular 6的用户的更新（不确定是否较早可用），一直在寻求有关此方面的帮助，这有点满足了我的需要。在angular.json文件中，您可以使用配置执行类似的操作；

/* ------removed start --------*/
"configurations": {
    "production": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },
    "dev": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev.ts"
        }
      ]
    },
    "test": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.test.ts"
        }
      ]
    }            
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "davinci-service:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "dev": {
      "browserTarget": "app:build:dev"
    },
    "test": {
      "browserTarget": "app:build:test"
    }
  }
},
/* ------removed end --------*/

并运行；

ng服务-c测试

Angular ng build使用不同的＆＃34;配置文件＆＃34;

4 个答案: