How to detect page refresh in .net core angular SPA template?

Question

I have project setup with .net core MVC SPA template. When the application is loaded, it loads angular spa into MVC.

My startup configure has below code to load SPA.

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

Once the SPA is loaded, there is no contact with server side on the MVC site. However when the page is reloaded, I would like to intercept this call and do something with the HTTPRequest and HTTPResponse. How do I achieve this ? I do not have any controller in the MVC project.

My project structure looks like this.

WEB
- wwwroot
- ClientApp ---> Angular spa
- Controllers ---> Empty
- Pages ---> Empty
- startup.cs
- program.cs

Can I ask what you're trying to achieve? Why do you need to detect page reload? — matt_lethargic
We need to refresh some of the CSS when page loads. This css will be designed by external tool so we would like to setup this css when the page loads and then SPA can take over and render style as is. If css changed on server then on page load we can again put new css — Zeus
What do you mean by when the page is reloaded? By pressing F5? — Edward

Edward Edward · Accepted Answer · 2018-11-19T05:51:07

For intercepting the request between client and server, you could try ASP.NET Core Middleware. All the requests from client will be handled by middleware.

A simple code like below:

        app.Use((context, next) =>
        {
            Console.WriteLine(context.Request.Path);
            return next.Invoke();
        });

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

Update

            app.Map("/css/site1.css", map => {
            map.Run(context => {
                context.Response.Redirect("/css/site2.css");
                return Task.CompletedTask;
            });
        });

How to detect page refresh in .net core angular SPA template?

1 Answers