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

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 oss@nativescript.org”, “description”: “NativeScript Application”, “license”: “SEE LICENSE IN <your-license-filename>”, “publishConfig”: { “access”: “public” }, “keywords”: [ “nativescript”, “mobile”, “angular”, “{N}”, “template” ], “repository”: “<fill-your-repository-here>”, “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 [src\app\item\items.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