Javascriptservices: Problems with webpack and HMR

[hanvyj]

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.

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:
• 

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.

[MarkPieszak]

Are you using VSCode, Visual Studio 2015?
What about some other general information.

What version of Node do you have installed?
Did you change any webpack settings?

How are you running the project, F5 in VStudio, or dotnet run etc.
Any additional info would certainly help!

[hanvyj]

Hi. All useful information! I've updated the question, but in summary it's Visual Studio 2015 (Update 3) running with F5. Node v4.6.1, Webpack 1.12.14 (in visual studio, I haven't edited the package.json) and 1.13.3 globally. NPM is version 3.10.8.

[jonorogers]

Just to check, you're setting ASPNETCORE_ENVIRONMENT=Development before dotnet run, right?

[hanvyj]

I had tried to check this after some googling. The following is in launchSettings.json:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:54765/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

And I also checked the Program.cs:

            var config = new ConfigurationBuilder()
                .AddCommandLine(args)
                .AddEnvironmentVariables(prefix: "ASPNETCORE_")
                .Build();

If I break after this I can inspect the config object and I can see the following environmental variables:

[0] {[APPL_PATH, /]}    System.Collections.Generic.KeyValuePair<string, string>
[1] {[ENVIRONMENT, Development]}    System.Collections.Generic.KeyValuePair<string, string>
[2] {[PORT, 4622]}  System.Collections.Generic.KeyValuePair<string, string>
[3] {[TOKEN, 3675202b-f6b6-4ebb-90fd-739f9f2edd95]} System.Collections.Generic.KeyValuePair<string, string>
[4] {[CONTENTROOT, D:\Projects\Angular2Application1\Angular2Application1]}  System.Collections.Generic.KeyValuePair<string, string>

Further confirmation, if I break in Startup.cs Startup method:

var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();
            Configuration = builder.Build();

I can see that env.EnvironmentName = "Development", although I have noticed there is no appsettings.development.json in my project. But there's not one in the template git repository either.

[jonorogers]

Are you running from the command line? Not sure what OS you're running, but I'll give an example on windows..

To run one of the examples I open up a command prompt, cd my way to the project directory, then type set ASPNETCORE_ENVIRONMENT=Development then dotnet run to run the app.. then it'll fire up on localhost:5000

[hanvyj]

Sorry, running on Windows 7, via Visual Studio 2015 Debug (or not with ctrl-F5). I just tried it from comand line using dotnet run setting development before and I do notice that it reports:

info: Microsoft.AspNetCore.NodeServices[0]
      Node will restart because file changed: D:\Projects\Angular2Application1\A
ngular2Application1\ClientApp\app\components\home\home.component.html

However, the webpage at http://localhost:5000/home or the compiled js file main-client.js are still not updated/complied after the save/change.

[MrCrimp]

This will happen to me if i run webpack from command line, so try deleting dist/main-client.js for the in-memory serving of files to start to kick in again, and you will have hot-reloading as well.

[SteveSandersonMS]

If you're running in development mode, then the webpack dev middleware will handle requests for dist/main-client.js regardless of whether such a file already exists on disk. Deleting the file should not change what gets served on the next request.

If you can repeatably reproduce a scenario where deleting that file does make a difference (in development mode), please post repro steps!

[SteveSandersonMS]

I have noticed however that the server-rendering has the change, but then this is quickly replaced by an unmodified main-client.js.

I wonder if this could just be the browser reusing a cached copy of main-client.js. Since you're using Chrome, could you try enabling the "_Disable cache (while DevTools is open)_" option (open the dev tools, then press F1 to get to those options), and do your page-refreshing with the dev tools opened?

[hanvyj]

This will happen to me if i run webpack from command line, so try deleting dist/main-client.js for the in-memory serving of files to start to kick in again, and you will have hot-reloading as well.

I thought this work and started writing an answer, then tested it further and I can't reproduce it. I definitely saw HMR once, but I'm not sure what exactly caused it.

I restart the server with dotnet run and get the following:

D:\Projects\Angular2Application1\Angular2Application1>dotnet run
Project Angular2Application1 (.NETCoreApp,Version=v1.0) was previously compiled.
 Skipping compilation.
Hosting environment: Development
Content root path: D:\Projects\Angular2Application1\Angular2Application1
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
info: Microsoft.AspNetCore.NodeServices[0]
      webpack built d54c74821102fb78cd36 in 7774ms

It recompiles the webpack. Latest main-client.js is used. Now, I need to refresh the web-page so it connects HMR:

info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/home
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method Angular2Application1.Controllers.HomeController.In
dex (Angular2Application1) with arguments () - ModelState is Valid
info: Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ViewResultExecutor[1]
      Executing ViewResult, running view at path /Views/Home/Index.cshtml.
info: Microsoft.Extensions.DependencyInjection.DataProtectionServices[0]
      User profile is available. Using 'C:\Users\joseph.hanvy\AppData\Local\ASP.
NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at
rest.
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action Angular2Application1.Controllers.HomeController.Index (Ang
ular2Application1) in 3939.8218ms
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 4224.9981ms 200 text/html; charset=utf-8
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/dist/main-client.js?v=
Dcohy5_NOcEEWugOOQNfgGhXjWYI68RcG1F7FiIZWOk
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 64.001ms 200 application/javascript; charset=UTF-8

However, making a change and saving a file does not result in a webpack compile. Just:

info: Microsoft.AspNetCore.NodeServices[0]
      Node will restart because file changed: D:\Projects\Angular2Application1\A
ngular2Application1\ClientApp\app\components\home\home.component.html

If I delete main client, it is not replaced by webpack. Also worth noting, that the above node restart is only applied once - further changes result in no similar message unless I refresh the page - then the next single change will result in the same.

The only time it triggers a webpack compile is after just starting the server. Also, it seems the server side rendering is not updated when using dotnet run, only F5 through VS.

Chrome cache doesn't seem to be the issue (though I tried it!), the main-client.cs file is simply not updated/produced.

Thanks for the help. I'm going to try reinstalling node, and maybe on another machine, There must be some issue with my node install or something? I still think it's strange that it takes so long to compile the webpacks. Previously it was almost instantaneous (with the vendor taking about 7 or 8 seconds) but now the handful of typescript files take that long and the vendor near a minute.

[hanvyj]

Okay! I've fixed it. Seems there was an issue with the node install. I installed the latest version (v6.9.1) and NPM.

Interestingly, with visual studio I can only make one change but when I open it in visual studio code it works with multiple changes. Also, it only works with dotnet run, not visual studio F5. I'm fine with that though.

Thanks for the help, how do I close this? It was clearly a problem with my platform rather than the template.

[MarkPieszak]

When you check your Visual Studio 2015, make sure $(PATH) is at the top for Node.

https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

Visual Studio comes with a much older version of Node installed that takes precedent usually.

[SteveSandersonMS]

Glad you sorted it out! I'll mark this closed.

@MarkPieszak I'm not sure how VS's usage of Node would have any effect on what happens at runtime. What's your theory about what's going on?

[MarkPieszak]

I'm honestly not sure, pretty puzzled by this one! I just assumed the older version might not be handling it right, but the fact that it works once and then stops, is very strange...
I have a Windows 7 PC in the office, so next week I can try and pull down latest and see if that's an issue.
@hanvyj Have you tried the latest Node v7.1.0?

[hanvyj]

I haven't tried v7.1.0, only v6.9.1. Worth trying when I get time. I checked my external tool paths, and have node referenced at the top:

I tried it on another machine (win 10 however) this weekend and everything worked fine, HMR was working in visual studio flawlessly.

[mageshbala90]

I am also facing the same issue.
When i create a new project with new solution, everything works fine.
But when i tried to add it as a new project to existing solution, HMR is not working.
When i run the project in the browser console, i can see HMR Connected. If i change edit any html file, in the visual studio debug info it shows file has changed. But in the browser it is not refreshing.. HMR is not working.

[cda-1]

I had the same issue as @mageshbala90, where an isolated, fresh project would work, but it would break as I moved the project into a solution. I think what caused the problem was that the existing solution was on a different path, so when I moved my angular/hmr project, it took on a new path but the .vs folder inside had settings referencing the old path.

I deleted the .vs folder, as well as bin, obj, and Properties. I opened the solution with VS2017, built, and let it regenerate all that stuff. HMR was then working again.

[donstarkey]

The following error on dotnet run

HMR not working. I am using VS2017. Node version v7.10.0 and npm version 4.2.0. However, HMR does work with the aspnetcore starter template. At a loss. I tried f5 and also running with dotnet run. Chrome setting is set to not use cache.