Problems with webpack and HMR #1274

New Issue

fergalmoran · 2025-08-09T17:19:31Z

fergalmoran commented

2025-08-09 17:19:31 +00:00

Originally created by @hanvyj on 11/10/2016

I'm having issues with HMR in Visual Studio 2015 (Update 3, running with ctrl-F5), but I think the issue is with webpack. I've just created a new .NET Core Angular 2 template from scratch. It runs fine, however when I make any changes these aren't applied. I've not made any changes to the settings, so I'm using the following versions (from package.json):

    "aspnet-webpack": "^1.0.11",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^0.14.1",

I'm using Node version 4.6.1:

D:\Projects\ShipIQAngular2\ShipIQAngular2>node -v
v4.6.1

NPM version 3.10.8:

D:\Projects\ShipIQAngular2\ShipIQAngular2>npm -v
3.10.8

For manual building I installed webpack globally using npm install -g webpack following the guide here. It's version 1.13.3 (as seen in compile output below)

There's a couple of things I've noticed.

Webpack does not seem to be compiling the typescript on save. It only does it when I build. However, I manually compiled the typescript, and it's taking a long time (over twenty seconds! I've had it as high as 45 on a project that I'd added a few more components to):

D:\Projects\Angular2Application1\Angular2Application1>webpack --config webpack.c
onfig.js
Hash: b1f46908066c7fb5b7338fb1f485a87e48a69aad
Version: webpack 1.13.3
Child
    Hash: b1f46908066c7fb5b733
    Version: webpack 1.13.3
    Time: 11740ms
             Asset   Size  Chunks             Chunk Names
    main-client.js  53 kB       0  [emitted]  main-client
        + 25 hidden modules
Child
    Hash: 8fb1f485a87e48a69aad
    Version: webpack 1.13.3
    Time: 11740ms
             Asset     Size  Chunks             Chunk Names
    main-server.js  52.3 kB       0  [emitted]  main-server
        + 23 hidden modules

This doesn't seem right.

But also, even after this the browser isn't updated. main-client.js has been compiled using the manual process and HMR is running ([HMR] connected shows in console, I can see http://localhost:59267/__webpack_hmr is running).

Even if I refresh the page, the changes are not applied. I have noticed however that the server-rendering has the change, but then this is quickly replaced by an unmodified main-client.js. Here's an example:

Change <h1>Hello, world!</h1> to <h1>Hello, world! Change</h1>.
Save (nothing happens).
Compile manually with webpack --config webpack.config.js
Refresh browser. Server side rendering shows "Change", then client kicks in and it disappears. See gif:

The only solution I've found is to close the browser, re-build with visual studio and re-launch the IIS server. I cant find any settings to configure the webpack process, so I'm struggling to find out what's wrong and why it isn't working.

*Originally created by @hanvyj on 11/10/2016* I'm having issues with HMR in Visual Studio 2015 (Update 3, running with ctrl-F5), but I think the issue is with webpack. I've just created a new .NET Core Angular 2 template from scratch. It runs fine, however when I make any changes these aren't applied. I've not made any changes to the settings, so I'm using the following versions (from package.json): ``` "aspnet-webpack": "^1.0.11", "webpack": "^1.12.14", "webpack-externals-plugin": "^1.0.0", "webpack-hot-middleware": "^2.10.0", "webpack-merge": "^0.14.1", ``` I'm using Node version 4.6.1: ``` D:\Projects\ShipIQAngular2\ShipIQAngular2>node -v v4.6.1 ``` NPM version 3.10.8: ``` D:\Projects\ShipIQAngular2\ShipIQAngular2>npm -v 3.10.8 ``` For manual building I installed webpack globally using `npm install -g webpack` following the guide [here](http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/). It's version 1.13.3 (as seen in compile output below) There's a couple of things I've noticed. 1) Webpack does not seem to be compiling the typescript on save. It only does it when I build. However, I manually compiled the typescript, and it's taking a long time (over twenty seconds! I've had it as high as 45 on a project that I'd added a few more components to): ``` D:\Projects\Angular2Application1\Angular2Application1>webpack --config webpack.c onfig.js Hash: b1f46908066c7fb5b7338fb1f485a87e48a69aad Version: webpack 1.13.3 Child Hash: b1f46908066c7fb5b733 Version: webpack 1.13.3 Time: 11740ms Asset Size Chunks Chunk Names main-client.js 53 kB 0 [emitted] main-client + 25 hidden modules Child Hash: 8fb1f485a87e48a69aad Version: webpack 1.13.3 Time: 11740ms Asset Size Chunks Chunk Names main-server.js 52.3 kB 0 [emitted] main-server + 23 hidden modules ``` This doesn't seem right. 2) But also, even after this the browser isn't updated. main-client.js has been compiled using the manual process and HMR is running ([HMR] connected shows in console, I can see http://localhost:59267/__webpack_hmr is running). Even if I refresh the page, the changes are not applied. I have noticed however that the server-rendering has the change, but then this is quickly replaced by an unmodified main-client.js. Here's an example: - Change `<h1>Hello, world!</h1>` to `<h1>Hello, world! Change</h1>.` - Save (nothing happens). - Compile manually with `webpack --config webpack.config.js` - Refresh browser. Server side rendering shows "Change", then client kicks in and it disappears. See gif: - ![refreshgif](https://cloud.githubusercontent.com/assets/20140222/20174437/add402e8-a735-11e6-8484-cd5e3199d6c7.gif) The only solution I've found is to close the browser, re-build with visual studio and re-launch the IIS server. I cant find any settings to configure the webpack process, so I'm struggling to find out what's wrong and why it isn't working.

fergalmoran closed this issue

2025-08-09 17:19:31 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1274