Repository navigation
Angular 10, HMR not working (blank page) #2243
Description
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 ",
"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 [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
- 555 hidden modules
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
Activity
betosalvador commentedon Sep 17, 2020
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 commentedon Sep 17, 2020
I've tested the problem persists with CLI 7.08 and @angular packages 10.1.1.
Working without HMR is frustating...
ozgursel commentedon Sep 20, 2020
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...
costanonato commentedon Sep 20, 2020
Hi @ozgursel
this solution solves the HMR problem?
thanks in advance
ozgursel commentedon Sep 20, 2020
no :) just solves blank page problem i faced
costanonato commentedon Sep 20, 2020
ok
thanks 👍
armache commentedon Oct 6, 2020
Having the same problem, is there any update or when to expect HMR in Angular 10?
juniorschen commentedon Oct 14, 2020
Same issue @NathanWalker
abdullahkhalidmahmood commentedon Oct 28, 2020
The issue is with HMR , for now you can use
ns run ios --no-hmrcomporell commentedon Jan 16, 2021
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 commentedon Jan 20, 2021
7.1 claims to have fixed it, but it didn't. At least not with Angular. Bump.
tomups commentedon Jan 20, 2021
Updated to Angular 11 and latest NS, HMR not working (getting blank page after reloading).
bernatgy commentedon Jan 22, 2021
Issue still persists after this (NativeScript 7.1 - HMR Reenabled and Xcode 12.3 Support) has been published. With the mentioned new versions.
PhilippS93 commentedon Jan 22, 2021
experiencing the same issue right now on Android (Angular 11.1.0, NS 7.1.3)
Evilazio commentedon Feb 9, 2021
experiencing the same issue right now on Angular 11 (Web App).
Made on 9 version and updated to v11 following update.angular.io steps.
juniorschen commentedon May 8, 2021
not working nativescript 8 angular 11 :/
grigala commentedon Jun 10, 2021
NS8 with Angular 12 - have the blank/white page issue on Android after the splash screen only when the dark mode is enabled. No problems on iOS.
elliottregan commentedon Oct 13, 2021
Same issue on the latest Angular 12.
Why is this issue closed?