ChatGPT解决这个技术问题 Extra ChatGPT

如何在Angular 6中通过`ng serve`设置环境

我正在尝试将我的 Angular 5.2 应用程序更新到 Angular 6。我成功地遵循了 Angular 更新指南中的说明(包括将 angular-cli 更新到 v6),现在我正在尝试通过

ng serve --env=local

但这给了我错误:

未知选项:'--env'

我使用多个环境 (dev/local/prod),这就是它在 Angular 5.2 中的工作方式。我现在如何在 Angular 6 中设置环境?

它的 v6,您与整个应用程序一起更新 angular-cli,所以我认为它很明显:]
很有帮助,马丁。感谢您分享您的见解。事实上,它一点也不明显。

D
David

您需要使用新的 configuration 选项(这也适用于 ng buildng serve

ng serve --configuration=local

或者

ng serve -c local

如果您查看您的 angular.json 文件,您会发现您可以更好地控制每个配置(aot、优化器、环境文件等)的设置

"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"
      }
    ]
  }
}

您可以获得有关管理环境特定配置的更多信息here

正如下面其他回复中所指出的,如果您需要添加新的“环境”,则需要将新配置添加到构建任务中,并且根据您的需要,还需要添加到服务和测试任务中。

添加新环境

编辑:为清楚起见,必须在 build 部分中指定文件替换。因此,如果您想将 ng serve 与特定的 environment 文件(例如 dev2)一起使用,您首先需要修改 build 部分以添加新的 dev2配置

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

然后修改您的 serve 部分以添加新配置,指向您刚刚声明的 dev2 build 配置

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

然后您可以使用 ng serve -c dev2,它将使用 dev2 配置文件


你知道是否可以在配置中添加 base-href 吗?或者只是在 ng build --c staging --base-href = /yyy/
@EduardoTolino:是的,您可以,有一个 baseHref 选项
我在哪里可以为开发环境指定远程调试端口?以便用 VSCode 进行调试。当然在 Angular 6 中。以便在启动 Chrome 浏览器时 ng serve 命令包含远程调试器端口。
信息链接已更新:github.com/angular/angular-cli/wiki/…
ng serve -c local 编译应用程序与“ng serve”相比需要时间
i
iamrajshah

This 的答案似乎不错。
但是,它导致我出现错误,因为它导致
Configuration 'xyz' could not be found in project ...
构建错误。
不仅需要更新 构建< /strong> 配置,还有 serve 配置。

所以只是为了不引起混淆:

--env 在 Angular 6 中不受支持 --env 已更改为 --configuration || -c(现在更强大)管理各种环境,除了添加新的环境文件,现在需要在 angular.json 文件中做一些更改:在 build { ... "build" 中添加新配置: "configurations": ... property new build configuration 可能仅包含 fileReplacements 部分,(但有更多选项可用)在 serve { ... "serve": "configurations": ... property new serve configuration 中添加新配置应包含 browserTarget="your-project-name:build:staging"


谢谢您的回答。它是对上述内容的一个很好的补充。干杯!
R
Roy Scheffers

您可以尝试:ng serve --configuration=dev/prod

构建使用:ng build --prod --configuration=dev

希望您使用的是不同类型的环境。


ng serve --configuration=dev/prod 命令与 ng serve 相比需要时间,为什么?
ng serve --configuration=prod 比 ng serve --configuration=prod 需要更多时间,因为文件最小化和生产就绪代码。
好的,如果我使用“ng serve --configuration=dev”命令意味着它也需要更多时间
不,它不应该花费更多时间。 prod 环境有额外的步骤来缩小、丑化和优化生产代码。除非您明确激活这些额外步骤,否则其他环境应该花费正常时间。
D
Dale K

Angular 不再支持 --env 而是你必须使用

ng serve -c dev

对于开发环境,

ng serve -c prod 

用于生产。

注意:-c--configuration


这是被问到的&一年前回答,您的答案也是错误的,它的 -c(带有单破折号)或 --configuration(带有双破折号)。
我们如何为 SSR 版本做同样的事情?
P
Prasanth Venkatesan

对于 Angular 2 - 5,请参阅文章 Multiple Environment in angular

对于 Angular 6,使用 ng serve --configuration=dev

注意:对于 Angular 6,也请参阅同一篇文章。但是无论你在哪里找到--env,都可以使用--configuration。这适用于 Angular 6。


S
Shridhar Acharya

您可以将命令 ng serve -c dev 用于开发环境 ng serve -c prod 用于生产环境

而建筑也同样适用。您可以使用 ng build -c dev 进行开发构建


S
Sateesh

使用这个命令来构建 Angular 6

ng build --prod --configuration=dev

A
Ashran Haider

这适用于 Angular 12

步骤1:

"serve":
  "configurations": {
    "staging": {
      "browserTarget": "projectName:build:staging"
    }

第 2 步:npx ng 运行 myapp:serve --configuration=staging


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅