Angular-cli: ng serve ignoring the env parameter and loads another envionment file

[poblouin]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.3
node: 8.5.0
os: linux x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Repro steps.

Hello, I'm starting to get a little crazy with this, I looked at the issues here, tried multiple things, not sure what is wrong. I can't make ng serve to use a specific environment file. I tried multiple syntax found in the doc and the issues, I'm now using "ng serve -e dev -dev", the app build fine, but my settings in environment.ts are not loaded, it's the settings from environment.prod.ts that are loaded.

In my angular-cli.json

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

The file structure:

And the content of environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000/api/v1'
};

In environment.beta.ts and environment.prod.ts production = true and apiUrl = ''

And then, when I try to logging in my app, it does not working because the url to my REST API is not valid. Instead of the localhost:8000 specified in my file, it tries to call the API on localhost:4200 (which is the port used by my angular app).

Someone has any idea what I'm doing wrong here?

The log given by the failure.

None

Desired functionality.

Help to make this work..

Mention any other details that might be useful.

None

[lianyi]

Does the following work for you?

ng b -e prod
ng s -e prod 
#or
ng s --environment=prod

[filipesilva]

Have you had a look at https://github.com/angular/angular-cli/wiki/stories-application-environments? It explains how environment files work.

With your .angular-cli.json options, ff you do ng serve -e dev you will get the environments/environment.ts file. If you do ng serve -e beta you will get the environments/environment.beta.ts file. And so forth.

But it's up to you to use the properties you put in that file at runtime. Putting does apiUrl doesn't do anything automatically. You have to import the environment file and use the properties there in your app for it to work.

For instance, environment.prod is being used in main.ts. If you want to use apiUrl in your components or services to build a url to load data from, you have to import and use environment.apiUrl there.

I hope this answers your question. Let me know if it doesn't and I'll reopen the issue. If you think this is a bug please provide a detailed reproduction (every step to follow) so that I can see it not work.

[poblouin]

@filipesilva Thank you, the problem was a rookie mistake on my side. My import was not correct, I was importing apiUrl from environment.prod instead of environment, this is why the environment were not working correctly..

[filipesilva]

Glad to hear you have it working now!

[vegaskev]

Just a head's up, I can't get ng serve to serve up a dev "environment". It sets environment.production to true every time. I've tried ng serve -e dev and ng serve -environment dev as well as ng serve --env=dev all three served up environment.production = true.

[shoff]

I'm having the exact same issue. Thought I was going mad. I've triple checked the files on this very very simple new project and running ng serve -e dev or ng serve -environment dev or any other of the combinations suggested ALWAYS returns production environment variables.

[roupify]

Be sure that in your component, you import
import { environment } from './../environments/environment'; instead of
import { environment } from './../environments/environment.prod';

I already made this mistake :P

[jeenn]

Does anyone know how to make different enviroments work with ng e2e?
I have the following on my angular.json

"fileReplacements": [
                {
                  "dev": "src/environments/environment.ts",
                  "prod": "src/environments/environment.prod.ts",
                  "test": "src/environments/environment.test.ts"
                }
              ],

But whenever I run ng e2e --env=test I get
_Unknown option: '--env'_

And my Angular CLI version is 6.0.8

[bargiladnice]

you should use "ng e2e --configuration=test"

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