potentially dangerous issue with ng serve and environment files

[ethanj]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [ ] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular6 with several versions of CLI tested from 6.0.8 through 6.2.1
node v10.0.0
npm 6.4.0
macOS 10.13.6

Repro steps

Note I am showing the simplest way to reproduce the issue by using environment.prod.ts since it is part of the default project generation, but this happens with any environment configured in angular.json, ie environment.local.ts .

ng new foo
cd foo
echo "export const environment = { production: true, foo: 'bar' };" > src/environments/environment.prod.ts
perl -i -pe 'print "import { environment } from \"../environments/environment\";\n" if /\@Component/'  src/app/app.component.ts
perl -i -pe 'print "foo = environment.foo;\n" if /title/'  src/app/app.component.ts
ng serve --configuration=production

Note it compiles with no errors.
Open a separate shell into the same directory and force a recompile of foo with

touch src/app/app.component.ts

You will see the original terminal recompile the project with an error like

ERROR in src/app/app.component.ts(10,19): error TS2339: Property 'foo' does not exist on type '{ production: boolean; }'

Desired functionality

ng serve should not switch the build configuration on recompilation due to file changes, and especially not without notifying the user the environment configuration has switched out from under them without them knowing it.

[filipesilva]

I think I understand what's going on but can you translate what those perl scripts do please? I've never really worked with perl and don't have it on my machine to test.

[ethanj]

Hi @filipesilva

I am just editing the files in place to create the example. I started with sed, but turns out sed on Mac is different from other platforms, so it would not be generally reproduceable.

So I add a 'foo' var to environment.prod.ts, then import and use the new environment var in app.component.ts.

Here are the resulting files:
environment.prod.ts

export const environment = { production: true, foo: 'bar' };

app.component.ts

import { Component } from '@angular/core';

import { environment } from "../environments/environment";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
foo = environment.foo;
  title = 'foo1';
}

PS I am super curious what environment you are in that doesn't have perl??

[filipesilva]

Thanks for going into detail on this. I'm on Windows, where a clean install does not include Perl.