angular-cli: environment.dev|prod|etc.ts files don't appear to be copied into environment.ts

Please provide us with the following information:

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Ubuntu 16.04
Versions. Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here:

» ng version                                                                                                                      
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.11-webpack.8
node: 6.3.0
os: linux x64

Repro steps. Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.
1. Add some custom fields/data in environment.dev.ts (or environment.prod.ts)
2. Import src/environments/environment into a component and attempt to use a newly added variable.
3. ng serve/build with the appropriate env set.
4. Variable will not have been read, as environment.ts will still be { production: bool }
The log given by the failure. Normally this include a stack trace and some more information. N/A
Mention any other details that might be useful. Specifically importing environment.dev or environment.prod (as appropriate) works fine, but obviously isn’t practical.

Thanks! We’ll be in touch soon.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 29 (4 by maintainers)

Most upvoted comments

Bear in mind that the content will be copied at runtime, in memory for ng serve and to the output bundles in ng build. Your src/environments/environment.ts file will never be altered, only the generated code.

I just tried this on a brand new beta.14 app with ng serve --prod, and as far as I can tell it works properly:

filipesilva on Sep 15, 2016

Closing as fixed.

filipesilva on May 22, 2017

I think I know what’s happening. It’s the typechecker, it’s not using the file replacement. I’ll see if it can be fixed.

Try this for now: use the same interface in both files aka have the test object member in both. That should satisfy the typechecker and at runtime you will get the different content:

Example:

// environment.ts
export const environment = {
  production: true,
  test: 'hello'
};

// environment.prod.ts
export const environment = {
  production: true,
  test: 'goodbye'
};

ng serve will print hello in console.log(environment.test)
ng serve --prod will print goodbye in console.log(environment.test)

filipesilva on Sep 16, 2016

Can be closed? I believe this was fixed awhile ago

Toxicable on Mar 3, 2017

Thanks for looking into it!

radoslavpetranov on Sep 16, 2016