Skip to content

Angular 10, HMR not working (blank page) #2243

Closed

Description

@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 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

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

  1. betosalvador commented on Sep 17, 2020

    @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.

  2. ptomasini commented on Sep 17, 2020

    @ptomasini
    Author

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

  3. ozgursel commented on Sep 20, 2020

    @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>
    
  4. costanonato commented on Sep 20, 2020

    @costanonato

    Hi @ozgursel

    this solution solves the HMR problem?

    thanks in advance

  5. ozgursel commented on Sep 20, 2020

    @ozgursel

    Hi @ozgursel

    this solution solves the HMR problem?

    thanks in advance

    no :) just solves blank page problem i faced

  6. costanonato commented on Sep 20, 2020

    @costanonato

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

    no :) just solves blank page problem i faced

    ok
    thanks 👍

  7. armache commented on Oct 6, 2020

    @armache

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

  8. juniorschen commented on Oct 14, 2020

    @juniorschen

    Same issue @NathanWalker

  9. abdullahkhalidmahmood commented on Oct 28, 2020

    @abdullahkhalidmahmood

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

  10. comporell commented on Jan 16, 2021

    @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?

  11. bernatgy commented on Jan 20, 2021

    @bernatgy

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

  12. tomups commented on Jan 20, 2021

    @tomups

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

  13. bernatgy commented on Jan 22, 2021

    @bernatgy

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

  14. PhilippS93 commented on Jan 22, 2021

    @PhilippS93

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

  15. Evilazio commented on Feb 9, 2021

    @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.

  16. juniorschen commented on May 8, 2021

    @juniorschen

    not working nativescript 8 angular 11 :/

  17. grigala commented on Jun 10, 2021

    @grigala

    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.

  18. elliottregan commented on Oct 13, 2021

    @elliottregan

    Same issue on the latest Angular 12.

    Why is this issue closed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions