Question

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

ng serve --environment=dev

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

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

问题在于，当我执行第一个例子中引用的那个时，我仍然可以看到prod版本。（我在被访问组件的构造函数中打印出整个 environment 对象。）我甚至尝试添加目标标志，尽管我很确定＆＃39; 39;运行构建时只有优化级别。没有区别......

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

我缺少什么，如何使用 environments / environment.ts 运行 serve 命令？

修改

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

我的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 2

从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 3

 ng serve -env=dev

这将使用"dev"

中environments/environment.ts键的值

如果这对您不起作用，请确保环境.ts在production: false中有environment.ts，如此...

export const environment = {
    production: false
};

也可能是你在main.ts中的某个地方启用了prod模式

如果所有其他方法都失败了，您可以启动一个新的cli项目，该项目具有正确的设置并节省一些麻烦。

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

3 个答案: