Deploying Angular 6 ASP.NET Core application

Question

I have developed an asp.net core 2.0 MVC application with the addition of an Angular 6 frontend application. They both exist in the same project structure. The asp.net core application acts as an API for the client side Angular 6 application.

I have been developing them side-by-side and included the following code segments inside the Startup.cs file to allow development whilst both applications are running:

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

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

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

The project structure for the Angular application can be found in ClientApp.

I know wish to deploy this project to IIS. So I am moving away from a development environment so I know that the line of code: spa.UseAngularCliServer(npmScript: "start"); is not going to be run.

When I publish the project through Visual Studio and move it to the inetpub folder as I would do for other applications, it does not serve the pages that I have developed within the Angular 6 application. I get 500 internal server error when trying to access a page such as /Home that I have defined within the RoutingModule of the Angular 6 application.

I am presuming that it is because I need to build the Angular application (which I can do through ng build --prod) and add the compiled JS files to a HTML page. But I am unsure how to go about this. If anyone has any links to relevant webpages that would be greatly appreciated. Or if you can provide any insight that would be very helpful.

Update #1:

Within the Startup.cs file, I made app.UseDeveloperExceptionPage() available for when running in production mode.

Instead of a 500 internal server error page, I got exception: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.

I also noticed that the ClientApp/dist folder was not present after publishing. I manually built ClientApp and added it to the application in inetpub. Now, I get the error in the console:

runtime.a66f828dca56eeb90e02.js:1 Uncaught SyntaxError: Unexpected token <

polyfills.7a0e6866a34e280f48e7.js:1 Uncaught SyntaxError: Unexpected token <

Request:10 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/styles.169e0a841442606822c8.css".

scripts.ee7fed27c36eaa5fa8a9.js:1 Uncaught SyntaxError: Unexpected token <

main.befe6f4d3c1275f2e1b3.js:1 Uncaught SyntaxError: Unexpected token <

Answer 1

You need to use this code for ASP.NET Core 2.0, not what you are using. My application is published using this approach.

        app.UseMvc(routes =>
        {
 //Remove this if you don't need it
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
              defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA 
        });

You need to have a Action in your HomeController which returns a View. Code for View is

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>