angular-cli: Environment flags not working

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.

Create a new project through ng new and install dependencies
Import environments/environment in app.component
Add some conditional behavior depending on the environment
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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 26 (2 by maintainers)

Most upvoted comments

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

chadbr on Jul 26, 2017

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 on Jul 25, 2017

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

hiyali on Nov 27, 2017

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 on Jul 25, 2017

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

thanks – Chad

chadbr on Jul 31, 2017

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

sant0shg on Jul 26, 2017

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

kl4n4 on Jul 26, 2017

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.

VictorJuliani on Jul 26, 2017