如何在开发模式下为 Angular 应用程序提供服务？

Question

根据多个来源（例如this one），我应该能够通过以下方式指定名称来在不同环境之间切换。

ng serve --environment=dev

如果我正确理解了设置，我的 .angular-cli.json 文件指向 environments/environment.ts 的标志值 dev em> 和 environments/environment.prod.ts 的 prod 值。

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

问题是，当我执行第一个示例中引用的那个时，我仍然可以看到 prod 版本。 （我在访问组件的构造函数中打印出整个 environment 对象。）我什至尝试添加 target 标志，尽管我很确定这只是优化运行构建时的水平。没区别……

ng serve --environment=dev --target=development

我缺少什么以及如何使 serve 命令与 environments/environment.ts 一起运行？

编辑

main.ts的内容如下。

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Answer 1

从 2020 年开始，使用 configurations 而不是环境。

"start:dev": "ng serve -c dev"

代替

"start:dev": "ng serve --env=dev"

这适用于serve 和build。 angular.json 应该是这样的：

"configurations": {
  "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"
      }
    ]
  }
}

Answer 2

我的angular-cli.json 中有这个配置：

  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/ava-mec/environment.dev.ts",
    "prod": "environments/ava-mec/environment.prod.ts",
    "hmg": "environments/ava-mec/environment.hmg.ts"
  },

在我的package.json 这个scripts 集合中：

"start-ava-mec-prod": "ng serve --app=ava-mec --environment=prod",
"start-ava-mec-hmg": "ng serve --app=ava-mec --environment=hmg",
"start-ava-mec-dev": "ng serve --app=ava-mec --environment=dev",
"build-ava-mec-local": "ng build --prod --app=ava-mec --environment=hmg --base-href './' --verbose && rsync dist/ /Library/WebServer/Documents/avamec/ --recursive --delete --exclude=.git*  --verbose",

如我所见，不同之处在于我使用的是应用程序配置（并使用 --app 来定义我正在使用的女巫应用程序）。在build 命令上，我使用--prod 来启用AOT 编译器。对我来说，这很好用。在我的环境文件上设置的变量可以在我的代码上正常访问。

Answer 3

 ng serve -env=dev

这将使用environments/environment.ts 中的"dev" 键值

如果这对您不起作用，请确保 environment.ts 在environment.ts 中具有production: false，就像这样...

export const environment = {
    production: false
};

也可能是您在 main.ts 中的某处启用了 prod 模式

如果一切都失败了，您可以启动一个新的 cli 项目，该项目将具有正确的设置并省去一些麻烦。