在 Angular 5 中按环境切换开发模式和产品模式答案

【问题标题】：switch development mode and product mode by environments in Angular 5在 Angular 5 中按环境切换开发模式和产品模式
【发布时间】：2021-01-17 04:48:21
【问题描述】：

我的angular-cli.json 有环境数组。

"environmentsSource": "environments/environment.ts"
"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"

在environment.ts，

export const environment = {
      production: false
};

在environment.prod.ts

export const environment = {
      production: true
};

在main.ts，

if (environment.production) {
    enableProdMode();
}

但是我只有一个package.josn 文件。

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"

我有不同的环境，例如 dev/qa 和 prod。 url 不一样，如何只切换一个 package.json 文件的模式？

构建和部署过程是自动化的。我们无法在构建时更改设置。

【问题讨论】：

标签： angular-cli ng-build

【解决方案1】：

您需要在 CLI 中引用 configuration。

运行 prod 环境的示例。

ng serve --configuration=prod

这会将environment.ts 文件替换为environment.prod.ts。

您可以在环境文件中设置所有需要的变量（url，...）。

在代码中，只需要读取环境文件即可。它将被 angular CLI 配置参数替换。您可以在angular.json 文件中对此进行参数化。

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

【讨论】：

我签入代码并将其部署到服务器中。机器不知道环境。只有用户可以看到与 url 的区别。即使在 dev url 中，您的代码也始终设置 prod 模式。
@你好我不清楚你的问题。如果不加--configuration参数，就是dev环境。
我更新了问题，构建/部署服务器将读取配置。它是 dev 或 prod。我的意思是我只是将一个文件签入源服务器，我不能为 dev 设置一个参数并为 prod 设置另一个参数。由于相同的源文件（package.json），它们使用相同的参数。它是自动构建过程。
在您的示例中，ng serve --configuration=prod。即使在开发中，它也始终是 prod 模式。我无法使用另一个参数设置 dev 的配置。 package.json 文件在任何环境中都必须相同。
@Hello 你可以有一个package.json，如果你设置："start": "ng serve", "start:prod": "ng serve --prod"。不能行代码来运行项目吗？

【解决方案2】：

在main.ts 中，我检查了document.location.host 的值。如果它包含特定的子字符串，那么我

enableProdMode()

【讨论】：