How index.html in Angular-CLI .NET Core is called?

Question

I have built an Angular-CLI .Net Core SPA with Visual Studio 2017 by using

dotnet new angular -o my-new-app 

What I am struggling to find is how index.html which lies inside ClientApp/src folder is called by default when write e.g.

http://localhost:57782

startup.cs file has as follows:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace angular_cli
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        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";
            });
        }

        // 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.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            //app.UseMvc(routes =>
            //{
            //    routes.MapRoute(
            //        name: "default",
            //        template: "{controller}/{action=Index}/{id?}");
            //});

            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");
                }
            });
        }
    }
}

On purpose, I have disabled MVC middleware and everything works fine. However, I have no idea by which mechanism and settings index.html is called... Any good explanations please?

Answer 1

So I had exactly the same question but for React App (I guess that for angular is very similar). I spent last 2 hours on investigation how things works under the hood and I'm still not quite sure If I'm right but thats what I found out:

Development

spa.UseReactDevelopmentServer(npmScript: "start");

1. This method runs npmScript called start - you may find it in package.json file in scripts section. This script starts WebPackDevServer which performs webpack pipeline in memory and then serves generated files also from memory (it allows reloading files in browser quickly and without rebuilding application which is great for development).

Webpack pipeline generate necessary js & css scripts, inject links to those files into index.html and then copy all necessary files into specified directory (or memory in this case ;))

2. It setup proxy to that server so ASP passes all request to that server and ultimately your files are just served from memory.

---

You may also run this server directly from console and instruct ASP to setup proxy to existing server without starting npm script. It may be achieved by using UseProxyToSpaDevelopmentServer method.

Production

In case of production build the server is not (and should not be) used. The build script should be called (by PublishRunWebpackstep which you can find in csproj file) which will run similar pipeline which will produce minified files and proper index.html into specified folder. Then those files will be served directly from HDD thanks to AddSpaStaticFiles configuration.

At least this is my current understanding of this process.

Answer 2

Maybe it is late for this question, but I met the same problem to figure out how index.html, which lies inside ClientApp/src folder, is called by http:// localhost:57788, and this is what I found.

According Microsoft's requirement for app.UseSpa method:

Handles all requests from this point in the middleware chain by returning the default page for the Single Page Application (SPA). This middleware should be placed late in the chain, so that other middleware for serving static files, MVC actions, etc., takes precedence.

That means all requests without registered, valid routes (http:// localhost:57788 does not have any controller, which is necessary according that project's route configuration) will reach and activate app.UseSpa middleware. The Framework to get path to the angular bootstrap Index.html file, first picking from spa.Options.SourcePath property (ClientApp) folder name , then looking for "baseUrl" in ClientApp /src/tsconfig.app.json file ("./"), which is the folder where index.html should reside. In case the framework found index.html file in ClientApp/src/ folder sending it to the client.

For verification you can try:
1. if you change src folder name to src_, you will get this error:
Error: ENOENT: no such file or directory, stat 'C:..... \ClientApp\src \tsconfig.app.json'
2. if you change index.htm file name to index__.html you will get this error:
Cannot GET /
3.Request with valid rout: http:// localhost:57788/
SampleData/WeatherForecasts is returning json data.

Answer 3

If you request server directly, you should be served with index.html in 'ClientApp/dist' folder given here:

        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });

and you are calling that service here:

        app.UseSpaStaticFiles();

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

If you are in development environment which you are, it will use npm start command which is equal to ng serve in the SourcePath you defined above, to start angular server and proxy requests to angular server. Actually displayed index.html is just on memory and neither in dist folder nor in wwwroot.

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