NG Serve with environment

[masaanli]

Please provide us with the following information:

I'm trying to figure out if there is a way to run 'ng serve --enviroment SOMEENVIRONMENT'?

I could not find anything here or in the Documentation about it.

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Mac OSX

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
6.9.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[clydin]

The environment and target options are identical to build's.

[baruchvlz]

You can see a list of available options here. Also make sure you are using the flag correctly ng serve -environment=ENVIRONMENT"

[masaanli]

I tried this and it seems to get the environment.

But it is not replacing the environment.ts file?

My problem now is:
My Http Service is getting the API URL from the environment.ts file! But this file never is changed when doing ng serve --env=dev.myname or --env.dev.othername

So what I want is that depending how I start the project with NG Serve my environment file is changed.

How to acchieve this?

[clydin]

Are you using beta22 or AOT mode? If so, changing the environment doesn't work.

[masaanli]

No AOT and using version 19-3 right now.

Is there a workaround for this?

[hansl]

You need to add the key to your angular-cli.json file, and point it to the right environment file.

For example, adding these lines to the angular-cli.json configuration:

{
  // ...
  "apps": [
    {
      // ...
      "environments": {
        "MYENVIRONMENT": "environments/environment.my.ts",
        // ...
      }
    }
  // ...
  ]
}

From there when you use --env=MYENVIRONMENT on serve or build it will use that environment file. --target=dev or --target=prod are used for optimization levels, not environment files. --prod is indeed equivalent to --env=prod --target=prod, but you can use custom environments with prod builds.

Closing this as fixed, but please reply if you have further questions or if this doesn't work. Also provide your angular-cli.json file if it doesn't work. Cheers!

[masaanli]

@hansl It's not working tried what u said.

But still when I try:
ng serve --env=dev.masaanli or ng serve --env=prod

the environment file stays the same. nothing happens. As u see below I want to let it change the environment.ts const so my httpService is reading the right apiUrl.

enviroment.ts

export const environment = {
  production: false,
  apiUrl: 'http://192.168.56.101:4400/'
};

at every enviroment the apiUrl is different.

http.service.ts partly

import { environment } from '../../../../environments/environment';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService {
    private headers: Headers;
    private apiUrl: string;

    constructor(private http: Http, private localStorageService: LocalStorageService) {
        this.headers = new Headers({
            AuthToken: this.localStorageService.getToken()
        });
        this.apiUrl = environment.apiUrl;
    }

  "project": {
    "version": "1.0.0-beta.17",
    "name": "maas-web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "maas",
      "mobile": false,
      "styles": [
        "styles/main.scss",
        "../node_modules/@progress/kendo-angular-inputs/dist/npm/css/main.css",
        "../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css",
        "../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.dev.ts",
        "dev.masaanli": "environments/environment.dev.masaanli.ts",
        "test": "environments/environment.test.ts",
        "acceptance": "environments/environment.stage.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }
}

[masaanli]

At the end I'm not seeing the file change BUT! I can see that it is doing the right requests it takes the right apiUrl?

My question is HOW?

[ryanlangton]

This is not working for me either. No error output or anything. Runs but always serves up the environment.dev settings. Frustrating.

[adamlutz]

for those still struggling w/ this (fyi @ryanlangton @masaanli), the answer is contained in @hansl's post #3387 (comment)

say you want another local environment aside from the default dev env.
the following is an example using a 'local' env configuration that works for me:
angular-cli.json:

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

ng serve command:

$ ng s --env=local

[alirezamirian]

@hansl
documentation says possible values for target are production and development, not prod and dev (as you said here). Is it a typo or both are acceptable?

[alirezamirian]

@hansl
Sorry but I'm a little confused!
in the docs we have:

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

In the second command, shouldn't it be --environment=prod?

Also serve and build docs, under target we have:

--target (aliases: -t, -dev, -prod) default value: development

But it seems it should be --dev and --prod. Right?

[alirezamirian]

Again in the docs:

# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

in the second command it's --e! 😕

[alirezamirian]

@hansl
I really appreciate your great work, but all these environment and target docs, seems confusing for new users of cli. I can create a pull request if you confirm that I'm right and these are typos.