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

Question

我開發了一個asp.net core 2.0 MVC應用程序，增加了一個Angular 6前端應用程序。 它們都存在於同一個項目結構中。 asp.net核心應用程序充當客戶端Angular 6應用程序的API。

我一直在開發它們，並在Startup.cs文件中包含以下代碼段，以便在兩個應用程序運行時進行開發：

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應用程序的項目結構。

我知道希望將此項目部署到IIS。 所以我正在離開開發環境，所以我知道代碼行： spa.UseAngularCliServer(npmScript: "start"); 不會被運行。

當我通過Visual Studio發布項目並將其移動到inetpub文件夾時，就像我為其他應用程序所做的那樣，它不會為我在Angular 6應用程序中開發的頁面提供服務。 嘗試訪問我在Angular 6應用程序的RoutingModule中定義的/ Home這樣的頁面時出現500內部服務器錯誤。

我認為這是因為我需要構建Angular應用程序（我可以通過ng build --prod ）並將已編譯的JS文件添加到HTML頁面。 但我不確定如何解決這個問題。 如果有人有任何鏈接到相關的網頁，將不勝感激。 或者，如果您能提供任何非常有用的見解。

更新＃1：

在Startup.cs文件中，我使app.UseDeveloperExceptionPage（）在生產模式下運行時可用。

而不是500內部服務器錯誤頁面，我得到了例外： SPA默認頁面中間件無法返回默認頁面'/index.html'，因為找不到它，並且沒有其他中間件處理該請求。

我還注意到發布后ClientApp / dist文件夾不存在。 我手動構建ClientApp並將其添加到inetpub中的應用程序。 現在，我在控制台中收到錯誤：

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

您需要將此代碼用於ASP.NET Core 2.0 ，而不是您正在使用的代碼。 我的應用程序使用這種方法發布。

        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，它返回一個View。 代碼是

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

Answer 2

Visual Studio 2019為此提供了一個項目模板，只需在開始頁面的第一步中選擇新項目，ASP.NET Core Web Application C＃，輸入解決方案名稱，然后選擇Angular項目模板。 您可以將解決方案基於在.NET Core或.NET Framework下運行的ASP.NET Core。

Answer 3

只需進行此更改，它應該適用於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

這是您可以遵循的一些停止：

1-確保您已發布您的應用程序當前在此鏈接中看到停止使用角度模板發布您的dotcore應用程序

2-在您的發布文件夾中運行帶有項目名稱的exe應用程序。 如果申請流程成功，那么問題就在您的iis

向iis提出請求並轉到事件查看器

Windows日志>應用程序

如果您看到一些錯誤，請單擊它並查看詳細信息

如果問題與無法運行或創建有關：

轉到您的iis池和高級設置，並將身份更改為本地系統

而你在這里發布的其他問題