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

[rjcoupe]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Ubuntu 16.04
2. 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

1. 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 }
2. The log given by the failure. Normally this include a stack trace and some
   more information.
   N/A
3. 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.

[JiriBalcar]

See #2073. It is changed to be only two files by default environment.ts (dev env) and environment.prod.ts (prod env)
You should add your variables to this two files.
I think this issue can be closed with this pull request.

[radoslavpetranov]

I'm a little confused. If environment.dev.ts or environment.prod.ts aren't copied into environment.ts on rebuild, how are we then supposed to import the correct environment file into our code?

[filipesilva]

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:

[radoslavpetranov]

The problem with not actually overwriting the files is that trying to use environment.test throws a compilation error because environment.ts which we import doesn't actually have a test variable in it.

[filipesilva]

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)

[radoslavpetranov]

Thanks for looking into it!

[ukaaa]

When can we expect a fix for this please?

[JiriBalcar]

@ukaaa @radoslavpetranov What is the use case to have different variables in environment? How do you handle that in code?

[ukaaa]

@JiriBalcar to only show information and links when we're running our app in a development environment.

[JiriBalcar]

@ukaaa And for that usecase you can use the production flag which is in both of the files. So you do not need different interface in evironment. Right?