Angular – How to serve Angular application in dev mode

angulartypescript

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));

Best Answer

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