部署Angular 6 ASP.NET Core应用程序

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>

Answer 2

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.

Answer 3

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

        });
    }

Answer 4

Here is some stop you can follow :

1- make sure you published your application currently see the stop in this link publishing your dotcore application with angular template

2- in your publish folder run the exe application with your project name on it. if the application process successfully then issue is in your iis

make a request from iis and go to event viewer

windows logs > Application

if your see some error click on it and see the details

if the issue is related with can't run or create:

go to your iis pool and advanced settings and change identity to local system

and you other issue posted here