部署Angular 6 ASP.NET Core应用程序 [英] Deploying Angular 6 ASP.NET Core application

问题描述

我已经开发了asp.net core 2.0 MVC应用程序，并添加了Angular 6前端应用程序.它们都存在于相同的项目结构中.asp.net核心应用程序充当客户端Angular 6应用程序的API.

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.

我一直在并行开发它们，并将以下代码段包含在Startup.cs文件中，以允许在两个应用程序运行时进行开发:

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

可以在 ClientApp 中找到Angular应用程序的项目结构.

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

我知道希望将此项目部署到IIS.因此，我离开了开发环境，所以我知道代码行: spa.UseAngularCliServer(npmScript:"start"); 将不会运行.

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.

当我通过Visual Studio发布项目并将其移至inetpub文件夹时(就像我对其他应用程序所做的那样)，它不为我在Angular 6应用程序中开发的页面提供服务.尝试访问我在Angular 6应用程序的RoutingModule中定义的/Home之类的页面时，出现500个内部服务器错误.

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.

我认为这是因为我需要构建Angular应用程序(可以通过 ng build --prod 进行此操作)并将已编译的JS文件添加到HTML页面.但是我不确定该怎么做.如果有人有任何指向相关网页的链接，将不胜感激.或者，如果您可以提供任何很有帮助的见解.

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.

更新#1:

在Startup.cs文件中，我使app.UseDeveloperExceptionPage()在生产模式下运行时可用.

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

我得到了一个异常，而不是一个500个内部服务器错误页面: SPA的默认页面中间件无法返回默认页面'/index.html'，因为找不到该页面，并且没有其他中间件处理该请求.

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.

我还注意到发布后不存在ClientApp/dist文件夹.我手动构建了ClientApp，并将其添加到inetpub中的应用程序中.现在，我在控制台中收到错误:

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 <

推荐答案

您需要将此代码用于 ASP.NET Core 2.0 ，而不是您正在使用的代码.我的应用程序是使用这种方法发布的.

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 
        });

您需要在HomeController中有一个Action，该Action返回一个View.查看代码为

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>

这篇关于部署Angular 6 ASP.NET Core应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！