CODEWITHSUNDEEP
angulartypescript
DonkeyBanana
DonkeyBanana

Reputation: 3556

How to serve Angular application in dev mode?

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

Upvotes: 16

Views: 42568

Answers (3)

Sam Andreatta
Sam Andreatta

Reputation: 193

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

Upvotes: 5

Joshua Michael Calafell
Joshua Michael Calafell

Reputation: 3107

 ng serve -env=dev

This will use the "dev" key's value in environments/environment.ts

If that is not working for you, then make sure that environment.ts has production: false in the environment.ts like so...

export const environment = {
    production: false
};

Also it could be that you are enabling prod mode somewhere in main.ts

If all else fails you could start a new cli project that would have correct settings and save some trouble.

Upvotes: -1

Brosig
Brosig

Reputation: 784

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.

Upvotes: 1

Related Questions