using Ionic Serve custom script to run Hot Module Reload (HMR) in 4.9.0 not working

[hiepxanh]

Description:

I was able to make angular hot reload with this angular cli wiki angular stories configure hmr. If I run npm run hmr everything just work fine.

I follow this issue #3819 to run custom script ionic serve matching with npm run hmr. but it just Waiting for connectivity with npm...

Steps to Reproduce:
step 1: follow this tutorial on new ionic project: angular cli wiki angular stories configure hmr.

step 2: make some change on ionic project follow this issue #3819.

// ionic.config.json is generated.
{
  "name": "test",
  "integrations": {},
  "type": "custom"
}

// package.json

"scripts": {
+    "ionic:serve": "npm run hmr",
}

Output:

it still waiting something

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (C:\Users\hiepx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 20 other plugins)

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.7.0
   OS     : Windows 10

Other Information:

[imhoffd]

It's because --host and --port aren't being forwarded to the final ng serve command. You can see this in the command output. My suggestion would be just to set the ionic:serve script to the Angular CLI directly:

  "scripts": {
    "ionic:serve": "ng serve --configuration hmr"
  }

[hiepxanh]

Wow... Sir. It true. My application can hot reload now. It is so amazing. It's incredible. My life open to the new page. And the development speed is reduce half of time. I dont know what to say with you. Thank you so much.

What you help me. That is the next level of ionic application, our development speed are almost as fast as React now.

I think you can create an simple command like ionic cordova run ios --hmr that will point to custom hmr script for each framework. (for example your current code above "ionic:serve": "ng serve --configuration hmr" for angular). Or you just make an small note on the document. I think many people don't know this and love that feature.

p/s: I will close this issue after you response. Don't worry.

[hiepxanh]

you have an issue can close Investigate HMR #3769

[hiepxanh]

[Small Feature Request]

Description:
I think there is only one small problem is: If I'm passing --prod for the command: ionic cordova build android --prod. It will not forward to ionic:build script. expect that I have to use ionic cordova build android -- --prod to make it go production.

Steps to Reproduce:
ionic cordova build android --prod not run ionic build production.

ionic cordova build android -- --prod is working.

Output:

Conclusion:
I think it not really important. It just will be more convenient for developer that not have to remember to change anything if they want to use HMR. Thank you so much.

[imhoffd]

@hiepxanh Glad to hear it's working! 😄

I think you can create an simple command like ionic cordova run ios --hmr that will point to custom hmr script for each framework. (for example your current code above "ionic:serve": "ng serve --configuration hmr" for angular). Or you just make an small note on the document. I think many people don't know this and love that feature.

See #3769 (comment). The point of that issue is to investigate the best way to implement HMR for Ionic and Angular.

@hiepxanh Would you mind opening a new issue for the feature request? That actually looks like a bug...

[hiepxanh]

yes sir, I'm sure.