Environment flags not working

[VictorJuliani]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.4
node: 6.10.3
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

Repro steps.

1. Create a new project through ng new and install dependencies
2. Import environments/environment in app.component
3. Add some conditional behavior depending on the environment
4. Serve the project with env attribute (tried all these)

ng serve --e=prod --env=prod -e=prod -env=prod --environment=prod -environment=pro
d

Desired functionality.

It should import the correct environment properties accordingly to the flag used.

Mention any other details that might be useful.

It stopped working after a yarn upgrade ran on my project and then I tested with a fresh new project generated by the cli.

[chadbr]

I have the same problem... the enhanced-resolve hack fixes this?

[chadbr]

any ideas when it started? I'm back to 1.2.2 so far and still broken -- broken in all of 1.2.x?

[chadbr]

ok - it's broken in 1.2... rolling back to 1.1.2 fixed it...

[BashPrime]

Running node 6.10.2. I narrowed down the issue to webpack using enhanced-resolve@3.4.1 in my project. Deleting my node_modules/ directory and running npm install will still install the 3.4.1 version of this package from as far back as @angular/cli@1.1.2, from what I've tested.

I can't say the following solution is good, but as a temporary workaround I've simply installed enhanced-resolve@3.3.0 as a dev dependency:

npm install --save-dev enhanced-resolve@3.3.0

I'm not using this package anywhere else in my project, so this works for me until I find a better way. Maybe I could set up a npm-shrinkwrap.json and force webpack to use enhanced-resolve@3.3.0?

EDIT: For clarity, my working setup uses @angular/cli@1.2.4 and enhanced-resolve@3.3.0 in my devDependencies object, in my package.json.

[BashPrime]

Issue is described in more detail here: webpack/enhanced-resolve#98

Angular devs checked in a fix earlier today, just a matter of the next release including it (hopefully soon)

[BashPrime]

Aaaaaand I missed the part where this exact fix was rolled into the 1.2.4 CLI release yesterday. Update to that version (you should be fine with your Node version) and you should be set.

[chadbr]

I noticed the issue on 1.2.4 -- upgraded yesterday... it wasn't working for me.

[VictorJuliani]

Both my global and local versions are 1.2.4 and it still doesn't work for me.
The yarn.lock file contains an enhanced-resolver@3.0.0, but it has the ^3.0.0 version too. The workaround (installing enhanced-resolver as a dev-dependency) didn't work either.

[sant0shg]

I checked @angular/cli version with both 1.1.0 and 1.2.1, but the environment flags were not working.

[kl4n4]

still doesnt work for me either - already tried @angular/cli versions 1.2.3, 1.2.4 and 1.3.0-rc.1

build itself works (when using --prod flag, AoT has to be disabled) but in the final JS bundle the values of dev environment.ts are included. Although setting the --env definitely seems to trigger something since I get build error when I disable variables in the targeted environment.ts

[sant0shg]

Does it have to do anything with the angular version? I am using 4.3.1 version of angular. Should I downgrade angular version to use lower version of cli? I am using angular 4.3.X for the new http interceptors.

[chadbr]

@netdeamon make sure you delete your .lock file when you're rolling back cli (or any package...) -- 1.1.x works for me...

[sant0shg]

@chadbr What is the angular version that you are using? I am using 4.3.1 angular and 1.1.2 angular cli version. But it was not picking up the right environment file. I deleted the .lock file as you suggested.

Build script

ng build --env=prod

[sant0shg]

Thanks @chadbr , it worked for me. I was experimenting with the .angular-cli.json while solving this issue. Using the 1.1.2 version of angular/cli with 4.3.1 angular worked for me. Thanks

[filipesilva]

I tried to repro this on a new project using @angular/cli@1.2.5 and wasn't able to see it. This is what I did:

• in main.ts added console.log('main.ts environment.production:', environment.production);
• in app.component.ts added

import { environment } from '../environments/environment';
console.log('app.component.ts environment.production:', environment.production);

• ran ng serve and saw:

app.component.ts environment.production: false
main.ts environment.production: false

• ran ng serve --prod and saw:

app.component.ts environment.production: true
main.ts environment.production: true

• ran ng serve --env=prod and saw:

app.component.ts environment.production: true
main.ts environment.production: true

So I think it is working correctly. You mentioned you used yarn though... and as far as I know there is a problem with yarn itself: #7136 (comment)

I'm closing this issue in favor of that one.