How to set environment via `ng serve` in Angular 6

Question

I am trying to update my Angular 5.2 app to Angular 6. I successfully followed instructions in the Angular update guide (including the update of angular-cli to v6), and now I am trying to serve the app via

ng serve --env=local

But this gives me error:

Unknown option: '--env'

I use multiple environments (dev/local/prod), and this is the way it was working in Angular 5.2. How can I set the environment now in Angular 6?

its v6, you update `angular-cli` alongside with the whole app, so i thought its obvious :] — Martin Adámek, May 04 '18 at 12:19
Very helpful, Martin. Thanks for sharing your insight. In fact it isn't in the least obvious. — Maxxx, Jun 01 '18 at 04:14

David · Accepted Answer · 2018-09-17T07:48:23.523

452

You need to use the new configuration option (this works for ng build and ng serve as well)

ng serve --configuration=local

or

ng serve -c local

If you look at your angular.json file, you'll see that you have finer control over settings for each configuration (aot, optimizer, environment files,...)

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

You can get more info here for managing environment specific configurations.

As pointed in the other response below, if you need to add a new 'environment', you need to add a new configuration to the build task and, depending on your needs, to the serve and test tasks as well.

Adding a new environment

Edit: To make it clear, file replacements must be specified in the build section. So if you want to use ng serve with a specific environment file (say dev2), you first need to modify the build section to add a new dev2 configuration

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

Then modify your serve section to add a new configuration as well, pointing to the dev2 build configuration you just declared

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

Then you can use ng serve -c dev2, which will use the dev2 config file

edited Sep 17 '18 at 07:48

answered May 04 '18 at 12:12

David

33,444
11
80
118

do you know if it's possible to also add base-href in the configurations? or just in ng build --c staging --base-href = /yyy/ – Eduardo Tolino May 04 '18 at 18:14
@EduardoTolino: Yes you can, there is a `baseHref` option – David May 10 '18 at 06:03
Where could I specify the remote debugging port for the dev environment ? So as to debug with `VSCode`. In `Angular 6` of course. So that the `ng serve` command includes the remote debugger port when launching the `Chrome` browser. – Stephane May 17 '18 at 09:42
info link updated: https://github.com/angular/angular-cli/wiki/stories-application-environments – Mateo Tibaquira Jun 06 '18 at 02:37
1

ng serve -c local take time to compile the application comparing to "ng serve" – Vignesh Sep 03 '18 at 10:53
ng serve in angular-cli 6 don't work with file replacement https://github.com/angular/angular-cli/issues/11540#issuecomment-406030775 – Mr Jedi Sep 04 '18 at 08:12
Be sure that in your component, you import `import { environment } from './../environments/environment';` instead of `import { environment } from './../environments/environment.prod'` The "intelligent" code help imported the latter for me. – Brian Davis Sep 04 '18 at 14:54
The `"serve"` part saved my day, thank you. I didn't noticed that migrating environments only to the `"build"` section is not enough. – Yoraco Gonzales Sep 30 '18 at 12:59
Is anyone here aware how to enable debugging while working with multiple environments ? I am unable to debug while using QA Environment, check this out - https://stackoverflow.com/questions/56045274/typescript-debugger-statement-does-not-work-while-working-with-qa-environme/56045408#56045408 – curious_debugger May 08 '19 at 17:22
Thanks for this, I always wanted to have custom configurations on serve, but just now I had the time to do some research and found this! :) – Sampgun Sep 25 '20 at 14:40

score 63 · Answer 2 · edited Jun 11 '19 at 13:44

This answer seems good.
however, it lead me towards an error as it resulted with
Configuration 'xyz' could not be found in project ...
error in build.
It is requierd not only to updated build configurations, but also serve ones.

So just to leave no confusions:

--env is not supported in angular 6
--env got changed into --configuration || -c (and is now more powerful)
to manage various envs, in addition to adding new environment file, it is now required to do some changes in angular.json file:
- add new configuration in the build { ... "build": "configurations": ... property
- new build configuration may contain only fileReplacements part, (but more options are available)
- add new configuration in the serve { ... "serve": "configurations": ... property
- new serve configuration shall contain of browserTarget="your-project-name:build:staging"

Thank you for your answer. It makes a nice addition to the one above. Cheers! — Anjana Silva, Jan 11 '21 at 12:41

score 15 · Answer 3 · edited Oct 07 '19 at 22:33

15

Angular no longer supports --env instead you have to use

ng serve -c dev

for development environment and,

ng serve -c prod

for production.

NOTE: -c or --configuration

edited Oct 07 '19 at 22:33

Dale K

25,246
15
42
71

answered Apr 30 '19 at 18:28

Shilpa Soni

306
3
7

2

This was asked & answered year ago, also your answer is wrong, its `-c` (with single dash) or `--configuration` (with double dashes). – Martin Adámek May 02 '19 at 11:15
how can we do same for SSR version ? – Santosh Dec 31 '21 at 14:21

score 12 · Answer 4 · edited Aug 22 '18 at 11:05

12

You can try: ng serve --configuration=dev/prod

To build use: ng build --prod --configuration=dev

Hope you are using a different kind of environment.

edited Aug 22 '18 at 11:05

Roy Scheffers

3,832
11
31
36

answered Aug 22 '18 at 10:33

amku91

1,010
11
21

ng serve --configuration=dev/prod command takes time comparing to ng serve why? – Vignesh Sep 03 '18 at 10:55
2

ng serve --configuration=prod takes more time then ng serve --configuration=prod because of file minimization and due to production ready code. – amku91 Sep 03 '18 at 11:49
ok if i use "ng serve --configuration=dev" command means its also taking more time – Vignesh Sep 04 '18 at 04:35
1

No, it shouldn't take more time. The prod environment has extra steps to minify, uglify and optimize the code for production. The other environments should take the normal time, unless you explicitly activate these extra steps. – Reginaldo Camargo Ribeiro Dec 11 '18 at 15:54

score 9 · Answer 5 · answered Jul 26 '18 at 09:36

For Angular 2 - 5 refer the article Multiple Environment in angular

For Angular 6 use ng serve --configuration=dev

Note: Refer the same article for angular 6 as well. But wherever you find --env instead use --configuration. That's works well for angular 6.

score 4 · Answer 6 · answered Feb 03 '19 at 06:34

4

You can use command ng serve -c dev for development environment ng serve -c prod for production environment

while building also same applies. You can use ng build -c dev for dev build

answered Feb 03 '19 at 06:34

Shridhar Acharya

83
8

score 2 · Answer 7 · answered Jul 20 '18 at 05:54

2

Use this command for Angular 6 to build

ng build --prod --configuration=dev

answered Jul 20 '18 at 05:54

Sateesh

1,327
9
12

Ashran Haider · Answer 8 · 2021-12-09T12:51:39.130

2

This works on Angular 12

step 1:

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

Step 2: npx ng run myapp:serve --configuration=staging

edited Dec 09 '21 at 12:51

answered Dec 09 '21 at 12:41

Ashran Haider

151
1
9

How to set environment via `ng serve` in Angular 6

8 Answers8

Linked

Related