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 <

You are writing code of Routing for ASP.NET Core 2.1. For ASP.NET Core 2.0, code is different. — Muhammad Waqas Dilawar
– Muhammad Waqas Dilawar, Commented Aug 14, 2018 at 13:37
@WaqasDilawarDaha Do you know what code I need for .Net Core 2.0? — Callum Osborn
– Callum Osborn, Commented Aug 14, 2018 at 14:00
Where did you find initial documentation that this was possible/how to do it? I am working on a similar app and would like to use this workflow for deployment. However I am using full .net framework, not core. — BlackICE
– BlackICE, Commented Aug 14, 2018 at 14:27
@BlackICE I found it here: dzone.com/articles/…. I also searched for Angular 6 and ASP.NET Core and numerous websites came up. — Callum Osborn
– Callum Osborn, Commented Aug 14, 2018 at 14:28

Muhammad Waqas Dilawar · Accepted Answer · 2018-08-14 14:07:19Z

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>

answered Aug 14, 2018 at 14:07

Muhammad Waqas Dilawar

2,4121 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Callum Osborn Over a year ago

I've removed the app.UseSpa from the Configure method and I have added the core for the view. But the view just returns Loading... back. Within my dist folder I do not have a main-server.

Callum Osborn Over a year ago

I did not use the ASP.NET Core Angular template. Rather I created the Angular project separately then wanted to include it in the ASP.NET core application.

Muhammad Waqas Dilawar Over a year ago

I know, I have done the same, but one thing apart from your question, use ASP.NET Core 2.1. Because ASP.NET Core 2.0 is not Long Term Support candidate.

Callum Osborn Over a year ago

Okay, I will update to ASP.NET Core 2.1 to see if this can resolve my issue.

Muhammad Waqas Dilawar Over a year ago

Be careful while updating, and take time.

|

Ngoc Nguyen Thanh · Accepted Answer · 2019-06-20 09:00:43Z

0

Just make this change, it should work for Prod IIS

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist/client";

        });
    }

answered Jun 20, 2019 at 9:00

Ngoc Nguyen Thanh

94 bronze badges

Comments

Stephan Kühn · Accepted Answer · 2019-05-06 21:19:44Z

-1

Visual Studio 2019 brings a project template for this, just select new project in first steps on start page, ASP.NET Core Web Application C#, enter a solution name, and select Angular project template. You may base your solution on ASP.NET Core running under .NET Core or .NET Framework.

answered May 6, 2019 at 21:19

Stephan Kühn

317 bronze badges

Collectives™ on Stack Overflow

Deploying Angular 6 ASP.NET Core application

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related