Hot Module Replacement (HMR) not working correctly, not reflecting changes in component class file

[acharyaks90]

Environment

• CLI: 6.1.2
• Cross-platform modules: 6.0.0
• NativeScript-Angular: 8.2.1
• Angular: 8.2.0
• Android
  (HMR) not working correctly
  in debug/run mode any change in component class code not updating app refresh with file update change detection but not update code. But with --no-hmr its works perfectly fine.

Expected behavior
tns debug android should work as tns debug android --no-hmr

[davorpeic]

Having similar issues with IOS, I see hot module file in yellow in console, but entire app restarts but no changes are applied, used --no-hmr flag to get updates right even without hmr. strange

[Fatme]

@acharyaks90, @davorpeic,

It'll be really appreciated if you send us the exact steps so we can reproduce the issue on our side. Also we'll need the content of your package.json file as well.

[davorpeic]

I recently updated from NS 5.4.2

{
  "description": "desc",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "xx",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "xxx",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "allow-publish": "^1.0.4",
    "angular2-uuid": "^1.1.1",
    "angular5-csv2": "^0.2.6",
    "moment": "^2.24.0",
    "nativescript-angular": "^8.2.1",
    "nativescript-appversion": "^1.4.2",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-email": "^1.5.4",
    "nativescript-feedback": "^1.3.9",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-loading-indicator": "^2.5.2",
    "nativescript-material-icons": "^1.0.3",
    "nativescript-ngx-fonticon": "^4.2.1",
    "nativescript-share-file": "^1.0.6",
    "nativescript-sqlite": "^2.3.3",
    "nativescript-theme-core": "^1.0.6",
    "nativescript-ui-dataform": "^5.1.1",
    "nativescript-ui-listview": "^7.1.0",
    "nativescript-ui-sidedrawer": "^7.0.2",
    "ngx-moment": "^3.4.0",
    "reflect-metadata": "~0.1.13",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.1.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.6",
    "@angular/cli": "8.0.0",
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "~1.2.0",
    "nativescript-worker-loader": "^0.9.6-next-2019-07-25-105954-01",
    "node-sass": "4.12.0",
    "ts-loader": "^4.5.0",
    "typescript": "~3.5.3"
  }
}

[kdagnan]

Can also confirm I am experiencing similar issues. It will say "refreshed application on XXXX" but nothing happens on screen.

[Fatme]

Hey guys,

We've investigated the problem and were able to reproduce the issue using the following steps:

1. tns create newNgAapp - select Angular, Sidedrawer
2. tns run ios
3. Make a change inside search.component.html (or search.component.ts)

The following text is printed on the console:

CONSOLE INFO file:///app/vendor.js:80079:36: HMR: Checking for updates to the bundle with hmr hash a99b4167b83a7f4aab8b.
CONSOLE INFO file:///app/vendor.js:80079:36: HMR: No Modules Updated.

4. Navigate to the search page on device

Expected: The changes should be applied on device
Actual: No changes are applied on device

5. If you make a next change inside search component, the change will be applied on device.

Can you confirm that you hit the same issue on your side? If this is not the case, can you describe the exact steps you're executing, so we can reproduce the issue on our side? It'll be appreciated if you send us a demo project demonstrating the behavior.

[edrick27]

hot reload don't work on TNS 6

[nkishor-nsf]

I am trying...
tns debug android should work as tns debug android --no-hmr

[nkishor-nsf]

I am facing same issue on TNS 6

[Fatme]

Hey guys,

@nkishor-nsf : I am facing same issue on TNS 6

We described here how we were able to reproduce the error. It seems as a minor issue as it happens only on first navigation to a lazy loaded route. Most probably it is not the same problem you faced. So, we need more information in order to help you. Without giving us the exact steps or demo project demonstrating the problem, we cannot investigate it further.

[Ianc22]

bump!

[DimitarTachev]

@ian22,

As @Fatme has already mentioned, we are not able to reproduce the issue and we are not able to investigate it further. Could you please provide us the exact dependencies' versions and some steps for reproducing the issue?

[mhmeluskey]

Hi @DimitarTachev

I am having the same problem for my nativescript app using v 6.1.0. on a mac. I have a project that used to work fine but all of a sudden the HMR stopped working for a specific project. The hot reload on this project still works for other projects on my mac and my co workers (all non mac users) are still able to have this project working on their computers. I know thats really vague but if i send you the dependencies would you be able to look into it.

[DimitarTachev]

@mhmeluskey,

This is a specific issue for updating lazy modules in Angular apps. I suggest you log another issue following the issue template. Also, the logs from tns run <platform> --log trace will be helpful.

P.S. Before logging the issue, please update the NativeScript CLI and the nativescript-dev-webpack plugin (along with your webpack.config.js file) to the latest versions. You could even check their rc version as we are currently preparing the 6.3.0 release and the issue could be already fixed. (npm i nativescript@rc -g, npm i nativescript-dev-webpack@rc, ./node_modules/.bin/update-ns-webpack --configs).

[mhmeluskey]

@DimitarTachev running npm i nativescript@rc -g, npm i nativescript-dev-webpack@rc, seems to have fixed my problem. Thank you for your help.

[timdoege]

HMR also stopped working suddenly on my Mac (I'm on NS 6.1 + Angular 8.2). Upgrading nativescript-dev-webpack seems to fix this.

[DimitarTachev]

I'm closing this issue as it's not related to the hot updates in Angular lazy routes anymore. For further HMR related issues, please log a new one following the issue template.

[fgutteridge]

For anyone still experiencing this issue, updating nativescript-dev-webpack to v1.3.0 (as @DimitarTachev and @timdoege shared) does indeed fix this issue.

(Edit: scratch that. HMR seemed to work there for a split second after the upgrade, but not anymore.)

I think this issue is worth reopening.

[DimitarTachev]

@fgutteridge, as the recent comments are not related to the initial issue, please follow the issue template and open a new issue with steps to reproduce.