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

【问题标题】：Deploying Angular 6 ASP.NET Core application部署 Angular 6 ASP.NET Core 应用程序
【发布时间】：2019-01-21 09:09:30
【问题描述】：

我开发了一个 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 <

【问题讨论】：

您正在为 ASP.NET Core 2.1 编写路由代码。对于 ASP.NET Core 2.0，代码有所不同。
@WaqasDilawarDaha 你知道.Net Core 2.0 需要什么代码吗？
让我回答这个问题。
您在哪里找到了可能/如何做到这一点的初始文档？我正在开发一个类似的应用程序，并希望使用此工作流程进行部署。但是我使用的是完整的 .net 框架，而不是核心。
@BlackICE 我在这里找到了它：dzone.com/articles/…。我还搜索了 Angular 6 和 ASP.NET Core，并且出现了许多网站。

标签： c# asp.net angular

【解决方案1】：

只需进行此更改，它应该适用于 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";

        });
    }

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您需要将此代码用于 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>

【讨论】：

我已从 Configure 方法中删除了 app.UseSpa，并为视图添加了核心。但是视图只是返回 Loading... 回来。在我的 dist 文件夹中，我没有主服务器。
我没有使用 ASP.NET Core Angular 模板。相反，我单独创建了 Angular 项目，然后想将其包含在 ASP.NET 核心应用程序中。
我知道，我也做过同样的事情，但除了你的问题之外，还有一件事，使用 ASP.NET Core 2.1。因为 ASP.NET Core 2.0 不是长期支持候选者。
好的，我会更新到 ASP.NET Core 2.1 看看能否解决我的问题。
更新时要小心，要花时间。