How to serve Angular application in dev mode?

Question

According to multiple sources (like e.g. this one), I'm supposed to be able to switch between different environments by specifying the name in the following way.

ng serve --environment=dev

If I understand the setup correctly, my .angular-cli.json file points to the environments/environment.ts for the flag value dev and to the environments/environment.prod.ts for the prod value.

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

The issue is that when I execute the one quoted in the first example, I still get to see the prod version. (I print out the whole environment object in the constructor of the accessed component.) I even tried to add the target flag, although I'm rather certain that's only the optimization level while running build. No difference...

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

What am I missing and how can I make the serve command run with environments/environment.ts?

edit

The contents of main.ts are as follows.

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

As of 2020, use configurations instead of environments.

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

Instead of

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

This works for serve and build. angular.json should look something like this:

"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

I have in my angular-cli.json this configuration:

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

And in my package.json this scripts set:

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

As i can see, the difference is that i'm using the application configuration (and using --app to define witch application i'm using). And on the build command i'm using --prod to enable the AOT compiler. For me this works fine. The variables set on my environments file become acessible on my code fine.