代码之家 › 专栏 › 技术社区 › CularBytes

在Azure Web应用程序上发布带有angular 7的.NET Core 2.1-尝试运行“ng serve”

angular7 azure angular c#

CularBytes · 技术社区 · 6 年前

我刚刚开始用Angular 7创建一个新的.NET Core 2.1项目。在本地运行它效果很好,在Azure Web应用程序上它无法“启动”(但我不确定它是否应该首先“启动”)。

Path dist index.html: /ClientApp/dist/ClientApp/index.html

当我将webapp应用程序设置中的“虚拟应用程序和目录”更改为site/wwwroot/ClientApp/dist/ClientApp时,它确实会运行,但无法调用实际的.NET核心API方法。当资产在同一文件夹中时,它也无法加载这些资产。

为什么这在本地工作得很好,而不是在生产中。我将带您浏览配置部分,您可能会发现一个问题。

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"
}

(只是默认值)

    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");
            }
        });
        ...
    }

建造:

它包含一个.NET核心构建任务,它只是指向csproj。
它包含一个.NET核心发布任务:

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

首先产生的错误如下:

错误。处理您的请求时出错。请求ID:| a1396e11-481DFBFF3C3C010DC。

发展模式切换到开发环境将显示有关所发生错误的更详细信息。

不应在已部署的应用程序中启用开发环境,因为它可能导致向最终用户显示异常的敏感信息。对于本地调试,可以通过将ASPNETCORE_环境变量设置为development并重新启动应用程序来启用开发环境。

所以,我做了需要做的事情,并通过添加 ASPNETCORE_环境 =发展。

处理请求时发生未处理的异常。

现在我当然可以安装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 . 这很有帮助

1 回复 | 直到 6 年前

CularBytes 6 年前

在@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
    });

     ...
}