Angular-cli: 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 [email protected] 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/[email protected], from what I've tested.

I can't say the following solution is good, but as a temporary workaround I've simply installed [email protected] as a dev dependency:

npm install --save-dev [email protected]

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 [email protected]?

EDIT: For clarity, my working setup uses @angular/[email protected] and [email protected] in my devDependencies object, in my package.json.

[BashPrime]

Issue is described in more detail here: https://github.com/webpack/enhanced-resolve/issues/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 [email protected], 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/[email protected] 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: https://github.com/angular/angular-cli/issues/7136#issuecomment-318313404

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

[chadbr]

for people following along... 1.2.6 fixes the issue for me.

thanks -- Chad

[AnthonyGiretti]

I'm sorry but it's still not working for me (I'm using angular-cli 1.4.4)

i have this :
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"qa": "environments/environment.qa.ts"
}

and it uses prod configuration
i ran this: ng build --env=qa

[hiyali]

Same issue with custom flag.

[marcuslind90]

I'm having this issue when using --prod or --environment=prod. It ignores the production file and keep using my development environment.ts file.

[hiyali]

I solved my problem now with many apps environment, it is a path problem I guess, you can do below for resolve this issue.
change .angular-cli.json

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

move ./src/environments to ./src/someApp/environments, and added the environment.local.ts.
And enjoy.

ng s -a someApp -e local
ng b -a someApp -e local
ng b -a someApp --prod // for production
ng s -a someApp // for development

[chadbr]

@filipesilva should I open a new bug report for this or should this one be re-opened?

[filipesilva]

@chadbr can you provide a reproduction I can follow to see it not working please? Happy to reopen then.

[darincardin]

same issue ("@angular/cli": "1.4.9"),.....and the bug is listed as closed?

[AnthonyGiretti]

Closed

Le jeu. 12 avr. 2018 à 15:04, Darin Cardin [e-mail] a
écrit :

same issue ("@angular/cli": "1.4.9"),.....and the bug is listed as closed?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/7138#issuecomment-380911664,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUN9Jzsz9uFpsCcC_Ms24V57Knqr4FOAks5tn6UlgaJpZM4Oi2k0
.

[phra]

it seems broken again with Angular CLI: 1.7.4 on Mac, but it works on linux.

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