时间戳

首页 > 解决方案 > Angular 应用程序无法在 dotnet core / IIS 下启动

c# - Angular 应用程序无法在 dotnet core / IIS 下启动

问题描述

我在 Visual Studio Professional 2017 Aspnet Core 下有一个 Angular 8 应用程序。如果我通过 angular cli 使用ng serve（或npm start）运行应用程序，它运行良好，我可以访问该应用程序。但是，如果我尝试在带有 IIS 的 Visual Studio 上调试它，它永远不会启动。我得到的唯一错误是 {"error":"Angular CLI 进程没有在 XXX 秒的超时时间内开始侦听请求。检查日志输出以获取错误信息。"}

我写了 XXX 秒，因为它与超时无关，应用程序永远不会启动我设置的任何超时。我将 Angular 核心包更新为最新版本，将 Visual Studio 2017 更新为最新版本，删除了 dist 文件夹，删除了节点模块，基本上尝试了我在互联网上看到的所有内容。

我的核心版本是：2.2.101

我以管理员身份运行 Visual Studio。

相同的代码在我同事的 PC 中运行良好。

这是我的 Startup.cs

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.Options.StartupTimeout = new TimeSpan(0, 0, 200);
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

这是我的 package.json

  {
  "name": "ABCXYZ..",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Abcxyz:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "debug": "ng serve --watch"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.14",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/http": "7.2.15",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/platform-server": "8.2.14",
    "@angular/router": "8.2.14",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "@nguniversal/module-map-ngfactory-loader": "8.2.6",
    "adal-angular": "^1.0.17",
    "adal-angular4": "^4.0.9",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "jquery": "3.4.1",
    "ngx-toastr": "^11.2.1",
    "popper.js": "^1.14.3",
    "primeng": "^9.0.0-rc.1",
    "rxjs": "^6.0.0",
    "tslib": "^1.9.0",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular/cli": "~8.3.21",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.1.1",
    "codelyzer": "~5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "typescript": "3.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

这是我的 dotnet 信息。

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.17763
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\2.2.101\

Host (useful for support):
  Version: 2.2.0
  Commit:  1249f08fed

.NET Core SDKs installed:
  2.1.202 [C:\Program Files\dotnet\sdk]
  2.1.403 [C:\Program Files\dotnet\sdk]
  2.1.502 [C:\Program Files\dotnet\sdk]
  2.1.509 [C:\Program Files\dotnet\sdk]
  2.2.101 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]

同样，如果我直接从 angular cli 运行相同的代码，它工作正常。

非常感谢任何帮助或指出正确的方向。谢谢！

标签： c#angularasp.net-core

解决方案

这个问题看起来像是 Visual Studio 如何在调试模式下处理 Angular 服务器启动的错误：

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

在开发模式下，Startup 尝试自行在随机端口上启动 ng 服务器。然后出现问题，重定向到 ng 服务器不起作用。

到目前为止，我发现的最佳解决方案是：

  • 自己在终端的 4200 端口上启动 ng 服务器
  • 修改上面的代码

像这样：

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.UseProxyToSpaDevelopmentServer("http://localhost:4200");
            }
        });

此解决方法 100% 的时间有效。

主要缺点是您失去了 1 按钮调试启动。

优点是：

  • 它有效，您可以再次调试您的应用程序而不会出现问题
  • 您可以在文本彩色终端中跟踪 ng 服务器正在做什么，当您在 Angular 应用程序中更改某些内容时，它可以为您提供更好的信息和建议。
  • Visual Studio 中的 JavaScript 调试器仍然可以正常工作。如果您更喜欢在浏览器中调试，您仍然可以这样做，这样您就不会在以您喜欢的方式调试 js 代码时丢失任何东西
  • C# 应用程序和 IIS 服务器的启动速度要快得多，因为您不必等待 Angular 应用程序的构建。
  • 您可以更好地控制要重新启动应用程序的哪个部分。

推荐阅读