Nativescript-angular: Angular 10, HMR not working (blank page)

[ptomasini]

Environment
tns info:
√ Component nativescript has 7.0.6 version and is up to date.
√ Component @nativescript/core has 7.0.0 version and is up to date.
× Component @nativescript/ios is not installed.
√ Component @nativescript/android has 7.0.0 version and is up to date.

package.json
{
"name": "@nativescript/template-hello-world-ng",
"main": "main.js",
"version": "7.0.2",
"author": "NativeScript Team [e-mail]",
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": "",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"ngcc": "ngcc --properties es2015 module main --first-only",
"postinstall": "npm run ngcc"
},
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/theme": "~2.3.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~10.1.0",
"@nativescript/android": "7.0.0",
"@nativescript/types": "~7.0.0",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~10.1.0",
"typescript": "~3.9.0"
},
"private": "true",
"readme": "NativeScript Application"
}

Describe the bug
HMR not working on Android (IOS not tested). No error reported, but application screen is blanked.

To Reproduce
create a sample application with angular and Hello world template :
nsc create sampleapp

build and launch application:
tns debug android --watch

The application is built and displayed on device (emulator)
Now modify file [srcappitemitems.component.html] changing, for example, the ActionBar title
The change is detected, but when hot updates are applied the app screen is blanked.

This is the output (no errors):
File change detected. Starting incremental webpack compilation...
Hash: bd62e71f13914cafaf7a
Version: webpack 4.44.1
Time: 496ms
Built at: 2020-09-08 14:24:47
Asset Size Chunks Chunk Names
792ff4769056012fc631.hot-update.json 48 bytes [emitted] [immutable] [hmr]
bundle.792ff4769056012fc631.hot-update.js 7.24 KiB bundle [emitted] [immutable] [hmr] bundle
bundle.js 44.8 KiB bundle [emitted] bundle
runtime.js 77.1 KiB runtime [emitted] runtime

• 1 hidden asset
  Entrypoint bundle = runtime.js vendor.js bundle.js bundle.792ff4769056012fc631.hot-update.js
  [../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
  [./app/item/items.component.ts] 1.92 KiB {bundle} [built]
  
  
  
  • 555 hidden modules
    
    Webpack compilation complete. Watching for file changes.
    
    Webpack build done!
    
    Successfully transferred bundle.792ff4769056012fc631.hot-update.js on device emulator-5554.
    
    Successfully transferred 792ff4769056012fc631.hot-update.json on device emulator-5554.
    
    JS: HMR: Checking for updates to the bundle with hmr hash 792ff4769056012fc631.
    
    JS: HMR: The following modules were updated:
    
    JS: HMR: ↻ ./app/item/items.component.ts
    
    JS: HMR: ↻ ./app/app-routing.module.ts
    
    JS: HMR: ↻ ./app/app.module.ts
    
    JS: HMR: Successfully applied update with hmr hash 792ff4769056012fc631. App is up to date.
    
    Refreshing application on device emulator-5554...
    
    JS: Angular is running in development mode. Call enableProdMode() to enable production mode.
    
    device: emulator-5554 debug port: 40000
  
  

To start debugging, open the following URL in Chrome:
devtools://devtools/bundled/inspector.html?ws=localhost:40000

Successfully synced application org.nativescript.sampleapp on device emulator-5554.

Expected behavior
HMR working as in previous release

[betosalvador]

Hello guys

I see that you guys are working hard on nativescript, but do you have any updates about HMR??

I'm still using nativescript 6 with angular 8 because the HMR is a great productivity tool for me, because I work with screen creation.

To me is very slow to have to wait 15seconds every time that I change anything on the template.

I see many questions here about this topic but withou any response :(

thanks in advance.

[ptomasini]

I've tested the problem persists with CLI 7.08 and @angular packages 10.1.1.
Working without HMR is frustating...

[ozgursel]

Same Problem, Blank Page

i updated existed Angular 8.2 Nativescript 6.5 project to Angular 10 Nativescript 7,
Angular looks working as i see from terminal also nativescript-feedbak plugin works too..., i saw info message when app started,

except Blank Page

So i solved my problem,

if your app.component.html like this

<page-router-outlet></page-router-outlet>

use the code below and save...

<GridLayout>
    <page-router-outlet></page-router-outlet>
</GridLayout>

[costanonato]

Hi @ozgursel

this solution solves the HMR problem?

thanks in advance

[ozgursel]

Hi @ozgursel

this solution solves the HMR problem?

thanks in advance

no :) just solves blank page problem i faced

[costanonato]

Hi @ozgursel
this solution solves the HMR problem?
thanks in advance

no :) just solves blank page problem i faced

ok
thanks 👍

[armache]

Having the same problem, is there any update or when to expect HMR in Angular 10?

[juniorschen]

Same issue @NathanWalker

[abdullahkhalidmahmood]

The issue is with HMR , for now you can use ns run ios --no-hmr

[comporell]

I am also having this issue with ns 7.0 and angular 10. It is quite annoying to work without hrm. Any updates on this?

[bernatgy]

7.1 claims to have fixed it, but it didn't. At least not with Angular. Bump.

[tomtastico]

Updated to Angular 11 and latest NS, HMR not working (getting blank page after reloading).

[bernatgy]

Issue still persists after this _(NativeScript 7.1 - HMR Reenabled and Xcode 12.3 Support)_ has been published. With the mentioned new versions.

[PhilippS93]

experiencing the same issue right now on Android (Angular 11.1.0, NS 7.1.3)

[Evilazio]

experiencing the same issue right now on Angular 11 (Web App).
Made on 9 version and updated to v11 following update.angular.io steps.