Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deploying Angular 6 ASP.NET Core application

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 <
like image 994
Callum Osborn Avatar asked Aug 14 '18 13:08

Callum Osborn


People also ask

Can we use Angular with ASP.NET Core?

The updated Angular project template provides a convenient starting point for ASP.NET Core apps using Angular and the Angular CLI to implement a rich, client-side user interface (UI). The template is equivalent to creating an ASP.NET Core project to act as an API backend and an Angular CLI project to act as a UI.

How do I add an Angular project to an existing .NET Core web API project?

To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later. In Solution Explorer, right-click the ASP.NET Core project and choose Add > Project Reference. Select the Angular project and choose OK. Right-click the ASP.NET Core project in Solution Explorer and choose Unload Project.

What is the best server to deploy Angular app?

Because these files are static, you can host them on any web server capable of serving files; such as Node. js , Java, . NET, or any backend such as Firebase, Google Cloud, or App Engine.


1 Answers

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>
like image 135
Muhammad Waqas Dilawar Avatar answered Oct 04 '22 04:10

Muhammad Waqas Dilawar