在 Azure Web Apps 上发布带有 angular 7 的 .NET Core 2.1 - 尝试 运行 'ng serve'
Releasing .NET Core 2.1 with angular 7 on Azure Web Apps - tries to run 'ng serve'
我刚刚开始使用 Angular7 创建一个新的 .NET Core 2.1 项目。运行 它在本地运行完美，在 Azure Web Apps 上它无法 'start'（而我我不确定它是否应该 'start' 首先。
路径 dist index.html: /ClientApp/dist/ClientApp/index.html
当我将 webapp 的应用程序设置中的 "Virtual applications and directories" 更改为 site/wwwroot/ClientApp/dist/ClientApp 时，它会执行 运行 但它无法调用实际的 .NET Core 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"
}
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 启动应用程序（然后执行 ng serve）。但是该项目已经构建并准备 运行ning，为什么它要像在开发中那样启动另一个网络服务器（在网络服务器上）？
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 是什么，实际上有一条评论告诉我关于生产环境的信息。为什么我的应用程序不像往常一样 运行ning？
更新 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 并指向 ClientApp/dist/ClientApp for rootPath。也许有帮助
在@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
});
...
}
我刚刚开始使用 Angular7 创建一个新的 .NET Core 2.1 项目。运行 它在本地运行完美，在 Azure Web Apps 上它无法 'start'（而我我不确定它是否应该 'start' 首先。
路径 dist index.html: /ClientApp/dist/ClientApp/index.html
当我将 webapp 的应用程序设置中的 "Virtual applications and directories" 更改为 site/wwwroot/ClientApp/dist/ClientApp 时，它会执行 运行 但它无法调用实际的 .NET Core 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"
}
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 启动应用程序（然后执行 ng serve）。但是该项目已经构建并准备 运行ning，为什么它要像在开发中那样启动另一个网络服务器（在网络服务器上）？
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 是什么，实际上有一条评论告诉我关于生产环境的信息。为什么我的应用程序不像往常一样 运行ning？
更新 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 并指向 ClientApp/dist/ClientApp for rootPath。也许有帮助
在@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
});
...
}