Angular-cli: 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 https://github.com/angular/angular-cli/issues/3387#issuecomment-264961243

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! :confused:

[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.

[alirezamirian]

Here are my findings based on trial and error:

1. --environment, --env, and --e can be used interchangeably.
2. -prod and --prod can be used interchangeably!

• I'm not with the --e. CLI tools usually offer expanded version of an option with two dashes and the possibly shortened alias with one dash. with this argument -prod is also not ok.
• It may be ok to support both --env and --environment but I think it's better to use only one version throughout the docs.

[zygimantas]

@masaanli I am interested, what is your use case of using serve in non development environment?

[raysuelzer]

@zygimantas for me, I often have to point to a local server, or one of several development servers to verify backend updates. It would be nice to have to modify the file every time I need to change the target server.

[idododu]

in the latest version, it is specified by configuration option
eg: ng serve -c production
https://github.com/angular/angular-cli/wiki/serve

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}