livesync problems: only every other view/style file change triggers - node 8.9.4 and above on Mac at least

[NathanWalker]

@NickIliev created an issue repo here which exhibits the following livesync problems when using these node/npm versions:

Nathans-MacBook-Pro:issue-630 nathan$ node -v
v10.2.1
Nathans-MacBook-Pro:issue-630 nathan$ npm -v
6.4.0

Repro:

• clone repo here
• cd nativescript-dev-webpack/issue-630
• run project with: tns run ios --emulator --bundle --env.aot
• after it launches, just open items.component.html and change ActionBar title to something else and then save.
• console will show:

File change detected. Starting incremental webpack compilation...
Webpack compilation complete. Watching for file changes.
Webpack build done!

And nothing happens. Save again and it will livesync. Save again and it does same output but never reloads, continue/repeat and same cycle occurs.

[NickIliev]

Confirming this as a reproducible issue when using Node.js 10.x.x

Using the linked application on Windows with the followng versions

C:\Users\niliev>node -v
v10.10.0

C:\Users\niliev>npm -v
6.4.1

C:\Users\niliev>tns --version
4.2.3

The issue is not present with Node.js 8.9.4

Pressing Ctrl+S twice is needed for libvesynt to kick in - simply saving once will output the message below without actually syncing the changes.

File change detected. Starting incremental webpack compilation...
Webpack compilation complete. Watching for file changes.
Webpack build done!

[NathanWalker]

I can also confirm that Node.js 8.11.2 is also broken the same as described for 10 unfortunately.

[NathanWalker]

Unfortunately same issue is present in 8.9.4 on a Mac at least (macOS high sierra 10.13.6)

[davecoffin]

+1 guys, this is a real time killer, why was this put in the backlog?

[NickIliev]

The issue is in the backlog because the issue was triaged by the team and we are currently looking into it and will change its severity. By definition, a backlog is a list of features or technical tasks which the team maintains and which, at a given moment, are known to be necessary and sufficient to complete a project

Update: After some additional investigation it appears that the issue is reproducible with the --env.aot flag only. Removing the flag makes the livesync predictable. Using the flag reproduces the issue.

[davecoffin]

I can confirm that removing the env.aot flag works and is blazing fast. Thanks so much for diagnosing this, I'll remove that flag until this is fixed, you guys rock!

[NickIliev]

Reported via t.1341763

[NathanWalker]

@sis0k0 @SvetoslavTsenov - just a note that I tried rc (specifically 0.17.0-2018-09-17-06) in a large project which I believe includes those Pr's and changes above however --env.aot flag still fails with:
ERROR in Debug Failure. False expression: Host should not return a redirect source file from getSourceFile

And it then reports:

Webpack compilation complete. Watching for file changes.
Webpack build done!

But it never reloads. This was even with making a single change in .ts file.

[SvetoslavTsenov]

Hey @NathanWalker, could you please try again with the official version of the plugin? It should be 0.16.1.

[NickIliev]

@NathanWalker the issue is resolved on my side with [email protected] - please let me know if the issue can be reproduced with a specific project (are you testing with XPlat )

[NathanWalker]

@NickIliev @SvetoslavTsenov yep same issue with 0.16.1 with xplat. I can demonstrate on a brief screen share if need be?

[NathanWalker]

Here's the brief stack:

File change detected. Starting incremental webpack compilation...
Hash: cb5b606d9ab8e65eaabc
Version: webpack 4.6.0
Time: 5572ms
Built at: 2018-09-19 20:27:36
    Asset      Size  Chunks             Chunk Names
bundle.js  1.65 MiB  bundle  [emitted]  bundle
 + 21 hidden assets
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
    + 1158 hidden modules

ERROR in Debug Failure. False expression: Host should not return a redirect source file from `getSourceFile`
Webpack compilation complete. Watching for file changes.
Webpack build done!
Executing before-shouldPrepare hook from /Users/nathan/Documents/github/financestack/cctrader/apps/nativescript-investments-trader/hooks/before-shouldPrepare/nativescript-dev-webpack.js
Skipping prepare.
Successfully transferred bundle.js.
Refreshing application...

It does reload the app but the changes didn't make it.

[NathanWalker]

@sis0k0 these are the {N} and angular deps I'm using:

"dependencies": {
"@angular/animations": "~6.1.0",
    "@angular/common": "~6.1.0",
    "@angular/compiler": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
"nativescript-angular": "6.2.0-2018-09-18-01",
"tns-core-modules": "~4.2.1",
   ...

"devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.0",
    "@angular/compiler-cli": "~6.1.0",
    "@angular/language-service": "~6.1.0",
"@ngtools/webpack": "~6.2.1",
"nativescript-dev-webpack": "~0.16.1"
}

[NathanWalker]

Looks like this error is related to this:
angular/angular#22524

[sis0k0]

Hi @NathanWalker! I couldn't reproduce the issue with the provided dependencies' versions. Can you share a sample app or nx workspace?

[NathanWalker]

Thanks @sis0k0 I will when I can find the time, really appreciate you looking into this. We are going to try some workarounds stated in the angular issue above there.

[NathanWalker]

Ok @sis0k0 the workaround posted literally yesterday on that angular issue worked. Crazy.

I also found an interesting workaround. This makes sure that any tslib used will be the same one.

"paths": {
"tslib": [ "node_modules/tslib"]
}

So that gets rid of this error specifically:

ERROR in Debug Failure. False expression: Host should not return a redirect source file from `getSourceFile`

However we are back to this original issue. The livesync on view and style files only triggers every other one.

So to recap, we can now livesync .ts with --env.aot fine with the workaround I mentioned there and from the angular issue. However the original issue, changes to view/style files still only happens every other change.

[NathanWalker]

Well correction - changes to only .html view files trigger livesync every other save to the file (style/scss files are fine). Definitely strange the evolution of aot and livesync here.

[NathanWalker]

Ok this issue is now solved. For anyone that comes across this make sure you're using the latest webpack.config.js that comes down with this plugin. Specifically ensure you have this in your projects config:

{
  test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
  use: [
    "nativescript-dev-webpack/moduleid-compat-loader",
     "@ngtools/webpack",
  ]
},