Hosting Angular project with ASP.NET core

Question

I have an Angular project which I want to host. There is a template in asp.net core web project for Angular. I studied the template and created an empty template project for ASP.NET core and installed required packages (like SPA and all other packages) Now I want to host the Angular project (which is not in the directory of.net project) through .net project.

The catch here is that I do not have the source code of this Angular project. We only get the binary package from Nexus. I observed that in the startup.cs file we get to provide the source path of project. Something like this

    spa.Options.SourcePath = "ClientApp"; 
  if (env.IsDevelopment())
        {
             spa.UseAngularCliServer(npmScript: "start");
        }

From this folder it opens the package.json file and finds for start command and does mg serve. Also it asks for its root path.

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

I am unaware of this part. My understanding is that the dist folder must be getting created through configuration before using it here.I am also unaware of how to configure it correctly if the source path id different from ClientApp. Can we use any such setting and make this work? The ultimate goal is to host the Angular project using HTTP.SYS from asp.net core project. Is this possible? What is the best way to do this?

As far as I know, all the workspace files inside that anything related to angular will be there in ClientApp folder. If you don't have the Angular Application source code, I don't think we can add/integrate it into the asp.net core application. Try to search "add angular to existing asp.net core project" using Google or Bing, and learn how to add an angular application to asp.net core project. — Zhi Lv, Oct 28 '20 at 14:07
@zhi Lv thank you for your response. I have tried adding Angular app to existing asp.net core project by providing the source path as mentioned in my question. But my problem is that I do not have source code. I have all binaries like main.js, polyfills.js etc and index.html files. How can we use them to achieve the goal? — Hope Michaelson, Oct 28 '20 at 14:25

score 0 · Answer 1 · answered Oct 28 '20 at 14:43

0

Static files are typically located in the webroot (wwwroot) folder By default. That is the place where we can serve up files directly from the file system.

However you can change it in startup.cs

    // using Microsoft.Extensions.FileProviders;
    // using System.IO;
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "MyStaticFiles")),
        RequestPath = "/StaticFiles"
    });

in the case of a single page application, you can do the following :

app.Map(new PathString(""), client =>
{       
    var clientPath = Path.Combine(Directory.GetCurrentDirectory(), "./ClientApp/dist");
    StaticFileOptions clientAppDist = new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(clientPath)
    };
    client.UseSpaStaticFiles(clientAppDist);
    client.UseSpa(spa =>
     {
         spa.Options.DefaultPageStaticFileOptions = clientAppDist;
     });                                       
});

answered Oct 28 '20 at 14:43

HiDDeN

126
1
4

some time angular cli will build your app inside a folder in the dist folder, so you might change `/ClientApp/dist` to `/ClientApp/dist/ClientApp` – HiDDeN Oct 28 '20 at 14:47
this is helpful. But my concern is about the pages that are not static. My goal is to host a compiled Angular code. I mean I am not sure if I am saying this correctly, but what I have with me is not the source code. By any chance do we ever do something like this? Hosting a compiled Angular code (binary package) through asp.net core project – Hope Michaelson Oct 29 '20 at 08:35
serving the source code doesn't make any sense, Angular is a SPA, all the structured pages/views (the structure that you see in the source files) get compiled to javascript with a single (index.html) entry point. all the navigation will happen on the client-side – HiDDeN Oct 29 '20 at 09:54
1

yes you are right. That worked. Thanks for your answer. Let me just add one more thing here, app.UseFileServer() does the work of both app.UseDefaultFiles() and app.UseStaticFiles(). While using these two one must not forget the sequence. It's default first and then static files. app.UseFileServer() does this sequence for us. – Hope Michaelson Oct 29 '20 at 14:28

Hosting Angular project with ASP.NET core

1 Answers1