Javascriptservices: Live reload no longer works after Angular 6 update

[dstj]

Live reloads no longer works after I updated a vanilla project to Angular 6 using instructions at https://update.angular.io/.

Do you know how to fix it?

To reproduce:

Using Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0

dotnet new angular -o UpgradeTest
cd UpgradeTest\ClientApp

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
ng update @angular/core

Fix startup by editing package.json to remove --extract-css from ng serve, resulting in:

    "start": "ng serve",

cd ..
dotnet run

C:\dev\scrap\UpgradeTest>dotnet run
info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using 'C:\Users\dstj\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
info: Microsoft.AspNetCore.SpaServices[0]
      Starting @angular/cli on port 51362...
Hosting environment: Development
Content root path: C:\dev\scrap\UpgradeTest
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
info: Microsoft.AspNetCore.SpaServices[0]
      > [email protected] start C:\dev\scrap\UpgradeTest\ClientApp
> ng serve "--port" "51362"

** Angular Live Development Server is listening on localhost:51362, open your browser on http://localhost:51362/ **

Open http://localhost:5000 and then modify any HTML, live reload will not trigger. It appears that recompilation occurs, but the HTML is not updated in the browser.

Note: opening the Angular Live Development Server at http://localhost:51362 will live reload, but the backend does not work. That's why I believe this is a dotnet setup issue.

[christianrondeau]

You might simply have an old ClientApp/dist folder, which contains files from before the upgrade. Delete the dist folder, and try again. It should _not_ be re-generated. Not sure why this folder existence silently causes the (webpack)-dev-server module not to be imported by __webpack_require__ though...

[dstj]

Thanks! That was it!

As to the why, because of this in Startup.cs maybe?

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

The description of configuration.RootPath is:

Gets or sets the path, relative to the application root, of the directory in which the physical files are located.

If the specified directory does not exist, then the Microsoft.Extensions.DependencyInjection.SpaStaticFilesExtensions.UseSpaStaticFiles(Microsoft.AspNetCore.Builder.IApplicationBuilder) middleware will not serve any static files

Maybe that should be inside a if (env.IsProduction()) { }...

[Eraph]

I am using server-side rendering. When debugging, I see this message:
AngularCliBuilder:Error: Unknown option: '--watch'

I had a snoop around the code and line 53 of Microsoft.AspNetCore.SpaServices.Extensions/AngularCli/AngularCliBuilder.cs wants to add --watch as an argument. Seems that the new Angular CLI isn't much happy about it. Perhaps there could be a switch, or something smarter can determine if it should be added or not?

Regardless, the workaround mentioned above does the trick, as long as there is a _main.js_ in the _dist-server_ directory. Even though whatever is watching does not update the file when changes are detected, the changes do come through to the browser.

[SteveSandersonMS]

Glad you got a solution.

As for built-in support for Angular 6, that's being tracked separately at https://github.com/aspnet/templating/pull/515

[shelbincormsquare]

Hi,
I've deleted ClientApp/dist folder, Environment is already "Development" and facing the same issue.
Please guide me to enable Live reload. And how do I enable hot module replacement?

[AlejandroFlorin]

I was having the same problem but it wasn't due to the angular 6 upgrade. It occurred first in one project, then another. After much experimentation, it looked to me like the port that the browser was set to to wasn't the same as the live update port visual studio was serving.

I finally was able to fix it by manually changing iisSetting -> iisExpress -> sslPort in launchSetting.json to a different number (i just incremented it by 1). That seemed to force VS to sync up the live update angular port number with the port number pushed to the browser.

I have no idea what caused this to happen in the first place.

Edit: If you aren't using SSL, maybe doing the same thing with the applicationURL setting under issExpress correct it for you. Note that there is a similar setting under the profiles -> [PROJECT NAME] section but I don't think that makes a difference for this problem

My previous workaround was incorrect. The workaround is actually to delete the Dist folder
https://stackoverflow.com/questions/50867385/development-server-hot-updates-not-working

[bvosk]

Thanks! That was it!

As to the why, because of this in Startup.cs maybe?

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

The description of configuration.RootPath is:

Gets or sets the path, relative to the application root, of the directory in which the physical files are located.

If the specified directory does not exist, then the Microsoft.Extensions.DependencyInjection.SpaStaticFilesExtensions.UseSpaStaticFiles(Microsoft.AspNetCore.Builder.IApplicationBuilder) middleware will not serve any static files

Maybe that should be inside a if (env.IsProduction()) { }...

This just killed half a day of productivity for me, thank you for pointing this out. Deleting the dist folder - as others have suggested - is not a good fix since it will be recreated every time you use ng build.

I implemented your suggestion with the following changes. I also had to add an env.IsProduction() guard around the configuration to serve static files in Configure() because that throws an error without the call to services.AddSpaStaticFiles(). Adding this for others to use if they need it.

```c#
public void ConfigureServices(IServiceCollection services)
{
...
ServiceProvider serviceProvider = services.BuildServiceProvider();
IHostingEnvironment env = serviceProvider.GetService();
if (env.IsProduction())
{
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
}
...
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
...
if (env.IsProduction())
{
app.UseStaticFiles();
app.UseSpaStaticFiles();
}
...
}
```