René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Angular 10, HMR not working (blank page)","articleBody":"**Environment**\r\ntns info:\r\n√ Component nativescript has 7.0.6 version and is up to date.\r\n√ Component @nativescript/core has 7.0.0 version and is up to date.\r\n× Component @nativescript/ios is not installed.\r\n√ Component @nativescript/android has 7.0.0 version and is up to date.\r\n\r\n**package.json**\r\n{\r\n  \"name\": \"@nativescript/template-hello-world-ng\",\r\n  \"main\": \"main.js\",\r\n  \"version\": \"7.0.2\",\r\n  \"author\": \"NativeScript Team \u003coss@nativescript.org\u003e\",\r\n  \"description\": \"NativeScript Application\",\r\n  \"license\": \"SEE LICENSE IN \u003cyour-license-filename\u003e\",\r\n  \"publishConfig\": {\r\n    \"access\": \"public\"\r\n  },\r\n  \"keywords\": [\r\n    \"nativescript\",\r\n    \"mobile\",\r\n    \"angular\",\r\n    \"{N}\",\r\n    \"template\"\r\n  ],\r\n  \"repository\": \"\u003cfill-your-repository-here\u003e\",\r\n  \"bugs\": {\r\n    \"url\": \"https://github.com/NativeScript/NativeScript/issues\"\r\n  },\r\n  \"scripts\": {\r\n    \"ngcc\": \"ngcc --properties es2015 module main --first-only\",\r\n    \"postinstall\": \"npm run ngcc\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@angular/animations\": \"~10.1.0\",\r\n    \"@angular/common\": \"~10.1.0\",\r\n    \"@angular/compiler\": \"~10.1.0\",\r\n    \"@angular/core\": \"~10.1.0\",\r\n    \"@angular/forms\": \"~10.1.0\",\r\n    \"@angular/platform-browser\": \"~10.1.0\",\r\n    \"@angular/platform-browser-dynamic\": \"~10.1.0\",\r\n    \"@angular/router\": \"~10.1.0\",\r\n    \"@nativescript/angular\": \"~10.1.0\",\r\n    \"@nativescript/core\": \"~7.0.0\",\r\n    \"@nativescript/theme\": \"~2.3.0\",\r\n    \"reflect-metadata\": \"~0.1.12\",\r\n    \"rxjs\": \"^6.6.0\",\r\n    \"zone.js\": \"~0.11.1\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular/compiler-cli\": \"~10.1.0\",\r\n    \"@nativescript/android\": \"7.0.0\",\r\n    \"@nativescript/types\": \"~7.0.0\",\r\n    \"@nativescript/webpack\": \"~3.0.0\",\r\n    \"@ngtools/webpack\": \"~10.1.0\",\r\n    \"typescript\": \"~3.9.0\"\r\n  },\r\n  \"private\": \"true\",\r\n  \"readme\": \"NativeScript Application\"\r\n}\r\n\r\n\r\n**Describe the bug**\r\nHMR not working on Android (IOS not tested). No error reported, but application screen is blanked.\r\n\r\n**To Reproduce**\r\ncreate a sample application with **angular** and **Hello world** template :\r\n`nsc create sampleapp`\r\n\r\nbuild and launch application:\r\n`tns debug android --watch`\r\n\r\nThe application is built and displayed on device (emulator)\r\nNow modify file [src\\app\\item\\items.component.html] changing, for example, the ActionBar title\r\nThe change is detected, but when hot updates are applied the app screen is blanked.\r\n\r\nThis is the output (no errors):\r\nFile change detected. Starting incremental webpack compilation...\r\nHash: bd62e71f13914cafaf7a\r\nVersion: webpack 4.44.1\r\nTime: 496ms\r\nBuilt at: 2020-09-08 14:24:47\r\n                                    Asset      Size   Chunks                               Chunk Names\r\n     792ff4769056012fc631.hot-update.json  48 bytes           [emitted] [immutable] [hmr]\r\nbundle.792ff4769056012fc631.hot-update.js  7.24 KiB   bundle  [emitted] [immutable] [hmr]  bundle\r\n                                bundle.js  44.8 KiB   bundle  [emitted]                    bundle\r\n                               runtime.js  77.1 KiB  runtime  [emitted]                    runtime\r\n + 1 hidden asset\r\nEntrypoint bundle = runtime.js vendor.js bundle.js bundle.792ff4769056012fc631.hot-update.js\r\n[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]\r\n[./app/item/items.component.ts] 1.92 KiB {bundle} [built]\r\n    + 555 hidden modules\r\nWebpack compilation complete. Watching for file changes.\r\nWebpack build done!\r\nSuccessfully transferred bundle.792ff4769056012fc631.hot-update.js on device emulator-5554.\r\nSuccessfully transferred 792ff4769056012fc631.hot-update.json on device emulator-5554.\r\nJS: HMR: Checking for updates to the bundle with hmr hash 792ff4769056012fc631.\r\nJS: HMR: The following modules were updated:\r\nJS: HMR:          ↻ ./app/item/items.component.ts\r\nJS: HMR:          ↻ ./app/app-routing.module.ts\r\nJS: HMR:          ↻ ./app/app.module.ts\r\nJS: HMR: Successfully applied update with hmr hash 792ff4769056012fc631. App is up to date.\r\nRefreshing application on device emulator-5554...\r\nJS: Angular is running in development mode. Call enableProdMode() to enable production mode.\r\ndevice: emulator-5554 debug port: 40000\r\n\r\nTo start debugging, open the following URL in Chrome:\r\ndevtools://devtools/bundled/inspector.html?ws=localhost:40000\r\n\r\nSuccessfully synced application org.nativescript.sampleapp on device emulator-5554.\r\n\r\n**Expected behavior**\r\nHMR working as in previous release\r\n\r\n","author":{"url":"https://github.com/ptomasini","@type":"Person","name":"ptomasini"},"datePublished":"2020-09-08T12:50:29.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":18},"url":"https://github.com/2243/nativescript-angular/issues/2243"}