Question

我有一个恒定的服务，可以保持应用程序的所有常数，包括后端的基本网址。

export class ConstantsService {
  public BACKEND_URL  = 'http://10.0.27.176:8000/';
}

这不太灵活，因为在构建项目后无法更改BACKEND_URL。我想要一个导出BACKEND_URL并且也存在于生产版本中的文件，以便在生成后也可以更改BACKEND_URL。

我这样做了：

import {environment} from '../environments/environment.prod';
...
export class ConstantsService {
  public BACKEND_URL = environment.url;
}

environment.prod.ts

export const environment = {
  production: true,
  url: 'http://10.0.27.176:8000/';
};

但是问题是此环境。构建中不存在prod.ts。

有人可以告诉我如何实现吗？

编辑： 我的bg build --prod输出如下。 没有environment.prod.ts

Date: 2018-09-11T11:52:10.945Z
Hash: 96c48ccf441d2f7a204f
Time: 9301ms
chunk {scripts} scripts.3af8bf49d802296d8ab1.js (scripts) 174 kB  [rendered]
chunk {0} 0.d9c510e0e0d04dde4c78.js () 1.27 kB  [rendered]
chunk {1} runtime.a18a7eb7c080a20cb142.js (runtime) 1.84 kB [entry] [rendered]
chunk {2} styles.0260add3f34224e145b6.css (styles) 5.58 kB [initial] [rendered]
chunk {3} polyfills.92108b287fe28032870b.js (polyfills) 59.6 kB [initial] [rendered]
chunk {4} main.4bbca11d5e8a6cdb36c0.js (main) 316 kB [initial] [rendered]

Answer 1

当您有多个环境可以编辑配置但使用相同的构建时，您正在寻找的内容非常有用。

重新构建整个应用程序以更改配置是没有意义的，尤其是在您需要管理部署并希望内部版本号保持一致或在多个位置托管同一应用程序的应用程序的企业环境中，例如，对于私有云场景，出于各种原因，不希望使用 SaaS 托管（所有客户端使用相同的应用程序）。

我们正在使用 APP_INITIALIZER 形式的 Angular 在应用启动时加载特定于环境的变量以获取数据。

在此处查看文档：{{3}}

通常最好按照约定来获取数据数据的 URL，我们让构建系统在相对路径 /assets/config/env.json 中放置一个具有环境特定设置的 .json 文件，该文件由初始化程序。

Answer 2

您建立了--prod吗？检查您的构建配置。应该用environment.prod.ts

代替标准的environment.ts

Answer 3

如果创建一个类，则应该实例化它。

例如，这意味着您将拥有：

export const environment = {
  production: true,
  ...new ConstantsService('http://10.0.27.176:8000/')
};

export class ConstantsService {
  constructor(public BACKEND_URL: string) {}
}

但是，如果您不知道，常量意味着您无法更改变量的内存引用，例如做

const x = 1;
x = 2;

但是由于您操纵一个对象，所以这是一个单一的内存引用。因此，没有什么可以阻止您执行此操作（尽管这是错误的做法）

expont const environment = {
  production: false
}

environment.production = true;

Tu可以完全回答您的问题，在构建应用程序时会使用环境文件。您应该始终导入默认值environment.ts。

在构建时，您可以使用命令参数来选择要使用的环境。

Angular 5

ng build --env prod

角度6

ng build -c prod

这将更改提供的默认环境文件。 prod是另一个默认值，但是您可以在angular[-cli].json文件中创建任意数量的文件。

Answer 4

理想情况下，您只需要从environment.ts导入，它将在构建时替换为不同的环境配置。

要启用environment.prod.ts，您需要运行ng build --prod或ng build --configuration=production。如果查看您的angular.json文件，则会看到以下部分：

"configurations": {
    "production": {
      "fileReplacements": [
        {
          "src": "src/environments/environment.ts",
          "replaceWith": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    }
  }

您还可以像这样创建自己的配置。例如，如果您创建另一个名为environment.test.ts的enviroment.ts，则可以这样使用它：

    "test": {
      "fileReplacements": [
        {
          "src": "src/environments/environment.ts",
          "replaceWith": "src/environments/environment.test.ts"
        }
      ],
      "optimization": false,
      "outputHashing": "none",
      "sourceMap": false,
      "extractCss": false,
      "namedChunks": false,
      "aot": false,
      "extractLicenses": false,
      "vendorChunk": false,
      "buildOptimizer": false
    }

在您的environment.test.ts中-

export const environment = {
  production: false, // this way you won't have to enable production mode for developing
  url: 'http://10.0.27.176:8000/';
};

Answer 5

我一直在寻找完全相同的东西，但是找不到任何解决方案。所以我做了自己的。

在您的config.js文件夹中创建config.prod.js和src。

var BASE_API_URL = 'X';

然后编辑angular.json文件，每个环境都有一个fileReplacements数组（如果没有任何自定义环境，则只有production）

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

然后将src/config.js添加到assets中的angular.json数组中。

            "assets": [
              "src/assets",
              "src/config.js",
              "src/Web.config"
            ],

然后将<script src="config.js"></script>放入您的index.html文件中。

然后构建，现在dist文件夹中有config.js文件是可编辑的。

如何在有角度的

5 个答案: