After update HMR not working on Angular - Error: "Module not found"

[tsonevn]

From @andresg747 on November 11, 2018 16:19

Environment

• CLI: 5.0.0
• Cross-platform modules: 5.0.2
• Android Runtime: 5.0.0
• iOS Runtime: 5.0.0
• Plugin(s):
  "nativescript-localstorage": "^1.1.5",
  "nativescript-pulltorefresh": "^2.1.1",
  "nativescript-snackbar": "^3.1.0",
  "nativescript-theme-core": "~1.0.4",
  "nativescript-ui-chart": "^3.6.1",
  "nativescript-ui-listview": "^3.5.11",
  "nativescript-ui-sidedrawer": "~4.1.0",

Describe the bug
When running tns run [android | ios] --hmr I get the following errors: Full Log.
The app (obviously), crashes on the device.
When running the same command without the HMR flag, the app runs perfectly.

To Reproduce
tns run [android | ios] --hmr

Expected behavior
Working Hot Module Replacement

I've added the script on main.ts and have "nativescript-dev-webpack": "0.17.0" installed.

Any help would be very appreciated. Thanks in advance.

Copied from original issue: NativeScript/NativeScript#6544

[tsonevn]

From @Fatme on November 11, 2018 18:47

@andresg747,

Maybe your webpack.config,js or your webpack's dependencies are not updated. Try to execute the following:

./node_modules/.bin/update-ns-webpack --deps
./node_modules/.bin/update-ns-webpack --configs

[tsonevn]

From @andresg747 on November 11, 2018 22:25

Hi, @Fatme.
I've run both commands, then run the tns run android --hmr and now i get the following:

Skipping node_modules folder! Use the syncAllFiles option to sync files from this folder.
Searching for devices...
Hot Module Replacement (HMR) is currently in Beta. For more information about the current development state and any known issues, please check the relevant GitHub issue: https://github.com/NativeScript/NativeScript/issues/6398
To enable Hot Module Replacement (HMR) in Angular projects, follow the steps outlined in this wiki: https://github.com/NativeScript/nativescript-angular/wiki/HMR
Executing before-liveSync hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-liveSync/nativescript-angular-sync.js
Executing before-watchPatterns hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watchPatterns/nativescript-dev-sass.js
Executing before-watchPatterns hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watchPatterns/nativescript-dev-typescript.js
Executing before-watchPatterns hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watchPatterns/nativescript-dev-webpack.js
Executing before-watch hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watch/nativescript-dev-sass.js
Hook skipped because bundling is in progress.
Executing before-watch hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watch/nativescript-dev-typescript.js
Hook skipped because bundling is in progress.
Executing before-watch hook from /Users/agarciag/Documents/nativescript/LiveData/hooks/before-watch/nativescript-dev-webpack.js
Running webpack for Android...
module.js:549
    throw err;
    ^

Error: Cannot find module '/Users/agarciag/Documents/nativescript/LiveData/node_modules/webpack/bin/webpack.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3
Executing webpack failed with exit code 1.
Cannot read property 'kill' of undefined

Still, running without HMR flag, is working correctly.

[tsonevn]

From @Fatme on November 11, 2018 22:46

@andresg747,

It seems it is still not updated correctly.

1. rm -rf node_modules
2. rm -rf hooks
3. rm -rf platforms
4. rm -rf webpack.config.js
5. Ensure nativescript-dev-webpack: 0.17.0 is written in package.json
6. Ensure nativescipt-angular: 6.2.0 is written in your package.json
7. Ensure the following code snippet https://github.com/NativeScript/nativescript-angular/wiki/HMR#enable-hmr-in-nativescript-angular-project is added
8. npm i
9. tns run ios | android --hmr

NOTE: --hmr mode does not work for projects containing lazy loading - #1564.

[andresggarcia]

Hi, @tsonevn, sorry for the delay on replying.

I did every step you pointed out. Still getting the same error.

I think you're right, I have developed the entire app using lazy loading modules, but I thought that feature only gets activated (?) using the --env.aot flag.

Probably that's a misconception I have about how lazy loading works.

Is there a way to still be able to get advantage of HMR in a medium-large project with lazy loaded modules?

Thanks!

[tsonevn]

Hi @andresggarcia,
As @Fatme has mentioned, the --hmr mode does not work for projects containing lazy loading. If you still need to use lazy loaded modules, you should build the project without --hmr flag.