部署 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");

        }

      });

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

我知道希望将此项目部署到 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，而不是您正在使用的代码。我的应用程序是使用这种方法发布的。&nbsp; &nbsp; &nbsp; &nbsp; app.UseMvc(routes =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;//Remove this if you don't need it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; routes.MapRoute(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "default",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; template: "{controller=Home}/{action=Index}/{id?}");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; routes.MapSpaFallbackRoute(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "spa-fallback",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });您需要在 HomeController 中有一个返回视图的操作。查看代码是<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

Answer 2

只需进行此更改，它应该适用于 Prod IIS&nbsp;public void ConfigureServices(IServiceCollection services)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);&nbsp; &nbsp; &nbsp; &nbsp; // In production, the Angular files will be served from this directory&nbsp; &nbsp; &nbsp; &nbsp; services.AddSpaStaticFiles(configuration =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; configuration.RootPath = "ClientApp/dist/client";&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }

Answer 3

Visual Studio 2019 为此提供了一个项目模板，只需在开始页面的第一步中选择新建项目，ASP.NET Core Web Application C#，输入解决方案名称，然后选择 Angular 项目模板。您可以将解决方案基于在 .NET Core 或 .NET Framework 下运行的 ASP.NET Core。