Ionic 5 - Angular 11 and Hot Module Replacement

Hi people,

I want to know if is possible to use new feature on Ionic 5 with core Angular > Hot Module Replacement.


Yes! It’s passed as a flag:

ionic serve -- --hmr


Didn’t work for me at all, I tried it and it seems the page refreshes every time

ionic serve -b -- --hmr

I wonder too

@netkow is the --hmr really passed on to ng by the ionic cli?

It does not show on the ng cli passed

ng.cmd run app:serve --host=localhost --port=8100

Whereas, if I run ng run app:serve --host=localhost --port=8100 --hmr, the HMR is enabled

Secondly, if I run ionic serve --hmr --verbose it seems that the hmr flag is recorded (hmr:true - first line), but later on in ionic:lib:serve not showing up again. (e.g. ionic:lib:serve hmr: true,)

ionic:lib Terminal info: { ci: false, shell: 'C:\\Windows\\system32\\cmd.exe', tty: true, windows: true } +0ms
  ionic:lib CLI global options: { _: [ 'serve' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, hmr: true, project: null, '--': [] } +5ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { context: 'app', type: 'angular', errors: [], configPath: 'C:\\Data\\src\\we-invest\\ionic.config.json' } +0ms
  ionic Context: { binPath: 'C:\\Users\\x\\AppData\\Roaming\\npm\\node_modules\\@ionic\\cli\\bin\\ionic', libPath: 'C:\\Users\\x\\AppData\\Roaming\\npm\\node_modules\\@ionic\\cli', execPath: 'C:\\Data\\src\\we-invest', version: '6.12.4' } +0ms
  ionic:lib:serve serve options: {
  ionic:lib:serve   '--': [],
  ionic:lib:serve   host: 'localhost',
  ionic:lib:serve   browser: undefined,
  ionic:lib:serve   browserOption: undefined,
  ionic:lib:serve   engine: 'browser',
  ionic:lib:serve   externalAddressRequired: false,
  ionic:lib:serve   lab: false,
  ionic:lib:serve   labHost: 'localhost',
  ionic:lib:serve   labPort: 8200,
  ionic:lib:serve   livereload: true,
  ionic:lib:serve   open: true,
  ionic:lib:serve   platform: undefined,
  ionic:lib:serve   port: 8100,
  ionic:lib:serve   proxy: true,
  ionic:lib:serve   project: 'app',
  ionic:lib:serve   publicHost: undefined,
  ionic:lib:serve   verbose: true,
  ionic:lib:serve   consolelogs: undefined,
  ionic:lib:serve   consolelogsPort: undefined,
  ionic:lib:serve   ssl: undefined,
  ionic:lib:serve   configuration: undefined,
  ionic:lib:serve   sourcemaps: undefined
  ionic:lib:serve } +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic serve' [ '--verbose', '--interactive', '--color', '--hmr' ] +0ms
  ionic:lib:hooks Looking for ionic:serve:before npm script. +0ms

   Ionic CLI                     : 6.12.4 (C:\Users\x\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1100.5
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3


   cordova-res : not installed
   native-run  : not installed


   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.10
   OS     : Windows 10

1 Like

So, I have hacked my way into hmr. In my global ionic cli, file serve.js, line 116 before the return statement in createOptionsFromCommandLine I added:

if (options['hmr']) { separatedArgs.push('--hmr')};

Obviously yet to discover if I opened Pandora’s box this way :slight_smile:

C:\Data\src\we-invest>ionic serve --hmr
> ng.cmd run app:serve --host=localhost --port=8100 --hmr
[ng] NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
[ng] See for information on working with HMR for Webpack.
[ng] - Generating browser application bundles...
[ng] √ Browser application bundle generation complete.
[ng] Initial Chunk Files

And I confirm, it is working like a charm!!!

It seems no one listens to you here except me, can you please open an issue in github?

1 Like

I have added comment to existing issue. Feel free to raise your own. :slight_smile:

1 Like

Let me buy you a drink! Thx

1 Like

I don’t see separatedArgs in my latest CLI version.

Can you please give me the link of existing issue too?

It is in the function createOptionsFromCommandLine. Not the one calling.

Yeah there is no createOptionsFromCommandLine in server.js but this function called in server.js at the mentioned line

there are multiple server.js. I think I used the one in lib (but would have to check).

Ok, that in the different path as there are many server.js path for it \npm\node_modules\@ionic\cli\lib\serve.js line 107:

While I confirm hmr enabled from logs, but it still refreshes the page.

Well, I guess if the module relates to the page shown, you can’t avoid a page reload. Maybe on CSS It should be more relaxed…

And I still have to check a case I seemed to have where the app looses the injected service. Not sure if that was because of HMR or a bug. Either way, an error I have never encountered before.

Tried HTML, SCSS and TypeScript everything refreshes the page

1 Like

Well, too bad. But recompile time beefed up. So some benefit, right? Ideally pages wouldn’t loose state. A refresh aside.

Everything refreshes the page!
I open another issue for that: