live reload not working when changing component html in editor with TypeScript compiling on

[time4Wiley]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior

I met the following error in Google Chrome when I change src/client/app/components/home/home.component.html after running npm run serve.dev

core.umd.js:2844 SyntaxError: Unexpected token < in JSON at position 0
    at Object.parse (<anonymous>)
    at Function.Config.ENVIRONMENT (config.ts:61)
    at new AppComponent (app.component.ts:21)
    at new Wrapper_AppComponent (wrapper.ngfactory.js:7)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (host.ngfactory.js:15)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (core.umd.js:9148)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (core.umd.js:9408)
    at ComponentFactory.create (core.umd.js:5482)
    at ApplicationRef_.bootstrap (core.umd.js:6551)
    at eval (core.umd.js:6460)

Expected behavior

The home component reloaded with the change I made.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

The motivation is to prevent dev time live reloading from hanging-up when changing non-js or ts assets/code while auto-compiling TypeScript is turned on in a Developer's IDE/Editor.

Please tell us about your environment:
Node.js: v7.20
npm: 4.0.2

macOS Sierra 10.12.2 Beta (16C53a)

WebStorm 2016.3.1

• Angular Seed Version: d450508

• Node: node --version = v7.2.0

[time4Wiley]

Here is how I fixed it:

The following code snippet is extracted from dist/dev/app/frameworks/core/utils/config.js when this bug happens

Config.ENVIRONMENT = function () {
        if (Config.IS_MOBILE_NATIVE()) {
            return {
                API: 'your api endpoint',
                ENV: 'nativescript'
            };
        }
        else {
            return JSON.parse('<%= ENV_CONFIG %>');
        }
    };

When the task 'build.js.dev' runs normally, file dist/dev/app/frameworks/core/utils/config.js will contain valid JSON from template replacement by gulp-template.

But when in a change contains no TypeScript/JavaScript files, task 'build.js.dev' simply does nothing.

But the gulp task 'build.assets.dev' will replace dist/dev/app/frameworks/core/utils/config.js with a version directly compiled by WebStorm itself.

[diegofal]

@sunwei415 thanks, your solution made my day :)

[time4Wiley]

@diegofalciola Glad the post is helpful.

[NathanWalker]

Thank you @sunwei415 I have provided a link back to your excellent suggestion here for the future:
https://github.com/NathanWalker/angular-seed-advanced/wiki/Live-reload-not-working-when-changing-component-html-in-editor-with-TypeScript-compiling-on