部署 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，而不是您正在使用的代码。我的应用程序是使用这种方法发布的。

        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 中有一个返回视图的操作。查看代码是

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

Answer 2

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

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