Ts-loader: Does ts-loader support HMR?

[tobico]

I'm trying to get hot reloading working in my TypeScript project, following this example here: https://github.com/krausest/ts-webpack-hmr

The example code README states that ts-loader does not support HMR, but there also appears to be issues here that suggest it does. I can't switch to awesome-typescript-loader right now, as it appears to be incompatible with the "pixi.js" library that I'm using.

I've tried following the example, and while I'm able to call the module.hot.accept method, webpack doesn't seem to pick it up when I change my module, and reloads the entire page.

Does ts-loader support HMR, and if so, would anyone have a working example I can refer to?

[johnnyreilly]

Useful references:

• https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
• https://webpack.github.io/docs/hot-module-replacement.html

[johnnyreilly]

https://github.com/TypeStrong/ts-loader/pull/322

That said others seem to be using hmr successfully. Maybe @dopare could share his setup?

[d0pare]

I am using this template.
Using angular2 with dotnet core.

[kirillgroshkov]

It works for me if I set transpileOnly: true and isolatedModules: true!

[johnnyreilly]

In short - yes. Use transpileOnly: true and use the fork-ts-checker-webpack-plugin for typechecking.

[johnnyreilly]

I'll try and add an example at some point

[johnnyreilly]

See our hot example

[rbonomo]

See our hot example

404

[Pong420]

https://github.com/TypeStrong/ts-loader#hot-module-replacement

create an other entry ( hot.ts ) and re-require the main entry ( main.ts ) inside the HMR callback function

require('./main');

if (module.hot) {
  module.hot.accept(['./main'], function () {
    require('./main');
  });
}

webpack.dev.js

module.exports = {
  mode: 'development',
  entry: ['./src/hot.ts'],
  // ....
}

webpack.prod.js

module.exports = {
  mode: 'production',
  entry: ['./src/main.ts'],
  // ....
}