Hi people,
I want to know if is possible to use new feature on Ionic 5 with core Angular > Hot Module Replacement.
FYI : https://webpack.js.org/concepts/hot-module-replacement/
Yes! It’s passed as a flag:
ionic serve -- --hmr
3 Likes
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:
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
Utility:
cordova-res : not installed
native-run : not installed
System:
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 
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 https://webpack.js.org/guides/hot-module-replacement 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.
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.
Exactly!
Everything refreshes the page!
I open another issue for that: