c# - 在 Azure Web Apps 上发布带有 Angular 7 的 .NET Core 2.1 - 尝试运行 'ng serve'

Question

我刚刚开始使用 Angular 7 创建一个新的 .NET Core 2.1 项目。在本地运行它效果完美，在 Azure Web Apps 上它无法“启动”(虽然我不确定它是否应该在第一个中“启动”)地点)。

路径 dist index.html:/ClientApp/dist/ClientApp/index.html

当我将 Web 应用程序的应用程序设置中的“虚拟应用程序和目录”更改为 site/wwwroot/ClientApp/dist/ClientApp 时，它会运行，但无法调用实际的 .NET Core API 方法。当 Assets 位于同一文件夹中时，它也无法加载 Assets 。

为什么这在本地工作得很好，但在生产中却不行。我将引导您完成配置部分，您可能会发现问题。

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ClientApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ClientApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.less"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ClientApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ClientApp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ClientApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.less"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ClientApp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ClientApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ClientApp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ClientApp"
}

Startup.cs(仅默认)

    public void ConfigureServices(IServiceCollection services)
    {            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        ....
        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });

         ...
    }

     public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ....
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
        ...
    }

VSTS/AzureDevOps:

构建:

• 它包含一个 .NET Core Build 任务，该任务仅指向 csproj。
• 它包含一个 .NET Core 发布任务:

发布:

• 只是一个标准部署配置:

首先产生的错误是这样的:

Error. An error occurred while processing your request. Request ID: |a1396e11-481dfbf3c3c010dc.

Development Mode Swapping to Development environment will display more detailed information about the error that occurred.

Development environment should not be enabled in deployed applications, as it can result in sensitive information from exceptions being displayed to end users. For local debugging, development environment can be enabled by setting the ASPNETCORE_ENVIRONMENT environment variable to Development, and restarting the application.

因此，我按照要求执行操作，并通过添加 ASPNETCORE_ENVIRONMENT = Development 切换到开发模式。

然后会弹出这个错误，基本上是说它想用 npm build 启动应用程序(然后执行 ngserve)。但是该项目已经构建并准备好运行，为什么它要像在开发中那样启动另一个网络服务器(在网络服务器上)？

An unhandled exception occurred while processing the request. AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: 'npm' is not recognized as an internal or external command,

现在我当然可以安装 angular-cli，但这似乎不是正确的做法，不是吗？在 Startup.cs 中，它告诉我 sourcePath 是什么，并且实际上有一条注释告诉我有关生产环境的信息。为什么我的应用程序无法像平常一样运行？

更新1:

在 Kirk Larkin 发表评论后，禁用开发环境并启用日志，生成了以下内容:

2018-11-27 12:17:03.259 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path / does not match a supported file type
2018-11-27 12:17:03.259 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path / does not match a supported file type
2018-11-27 12:17:03.607 +00:00 [Debug] Microsoft.AspNetCore.Builder.RouterMiddleware: Request did not match any routes.
2018-11-27 12:17:03.609 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /index.html does not match an existing file
2018-11-27 12:17:03.628 +00:00 [Error] Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware: An unhandled exception has occurred while executing the request.
System.InvalidOperationException: 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.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)
   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.Invoke(HttpContext context)
2018-11-27 12:17:03.721 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /Error does not match a supported file type
2018-11-27 12:17:03.721 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /Error does not match a supported file type
2018-11-27 12:17:03.727 +00:00 [Debug] Microsoft.AspNetCore.Routing.Tree.TreeRouter: Request successfully matched the route with name '(null)' and template 'Error'.
2018-11-27 12:17:03.744 +00:00 [Debug] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Initializing Razor view compiler with compiled view: '/Pages/Error.cshtml'.
2018-11-27 12:17:03.744 +00:00 [Debug] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Initializing Razor view compiler with compiled view: '/Pages/_ViewImports.cshtml'.
2018-11-27 12:17:03.745 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Located compiled view for view at path '/Pages/Error.cshtml'.
2018-11-27 12:17:03.820 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Could not find a file for view at path '/Pages/_ViewStart.cshtml'.
2018-11-27 12:17:03.828 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Could not find a file for view at path '/_ViewStart.cshtml'.
2018-11-27 12:17:03.900 +00:00 [Information] Microsoft.AspNetCore.Mvc.RazorPages.Internal.PageActionInvoker: Route matched with {page = "/Error", action = "", controller = ""}. Executing action /Error

它说找不到index.html或任何支持的文件类型。我现在尝试更新 ht Startup.cs 并指向 rootPath 的 ClientApp/dist/ClientApp。也许有帮助

Answer 1

在@KirkLarkin 发表评论后，我找到了解决方案。我只需将 rootPath 更改为 index.html

的位置

public void ConfigureServices(IServiceCollection services)
{            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    ....
    // In production, the Angular files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist/ClientApp";//change here
    });

     ...
}