In my previous article, I showed how we could easily create an Angular 5 CLI app inside of an ASP.NET Core application. There was one big thing that bugged me about that approach though: our ASP.NET Core application and our Angular CLI application were hosted separately during local development. After spending some time with the ASP.NET 2.1 Preview Angular template, I found a solution.

Hot Reloading Fail

One of the things I liked from the ASP.NET Core 2.1 Preview templates over my approach is that hot reloading worked seamlessly for both Angular and ASP.NET Core.

Make a change in the Angular app? Everything reloads automatically.

Make a change in the ASP.NET Core app though? Nothing. You have to manually refresh.

But no more.

Enabling Hot Reloading for Both Angular and ASP.NET Core

Just like we did with the ASP.NET Core 2.1 Preview, we can use the SPA Services extensions for ASP.NET Core to proxy requests to our Angular CLI app.

The first thing we need to do is add the required NuGet package: microsoft.aspnetcore.spaservices.extensions.

Now we can configure our app as a SPA, and tell it to act as a proxy to our Angular CLI-hosted app during development.

In Startup.cs:

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            //snip

            app.UseSpa(spa =>
            {
                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                }
            });
        }

That’s almost it. There are a few other things we’ll want to adjust just to streamline the development experience further.

First, let’s reconfigure our npm start task so that it won’t open our Angular application when we open our solution.

In package.json, remove the --open flag from the npm start task:

{
  //snip!
  "scripts": {
    //snip!
    "start": "ng serve",
    //snip!
  },
  //snip!
}

Instead, we’ll run our Angular app by pressing F5 (or ctrl+F5 if you don’t want the debugger).

Let’s make one final change before we call it a day.

If we press F5 now, Visual Studio will launch our application and take us to the /api/values endpoint, because that’s what our launchSettings.json file tells it do.

We don’t want it to do that.

We just want it to serve the root of our application, which will be proxied to our Angular application.

So, in launchSettings.json, just remove the two launchUrl settings completely.

And that’s it!

Wrapping Up

With those simple changes, our ASP.NET Core + Angular CLI application will now hot reload no matter what we change: TypeScript, CSS, or C#.

I’ve updated the sample application on Github, too. You can check it out here.

Want to see more examples of Angular and ASP.NET Core? Stay tuned! I’ve got a lot of great content lined up! And if you have specific topics or scenarios you’d like to see, let me know in the comments!