繁体   English   中英

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

[英]Angular application does not start under dotnet core / IIS

我在 Visual Studio Professional 2017 Aspnet Core 下有一个 angular 8 应用程序。 如果我使用ng serve (或npm start )通过 angular cli 运行应用程序,它运行良好,我可以访问该应用程序。 但是,如果我尝试在带有 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 运行相同的代码,它工作正常。

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

该问题看起来像是 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 应用程序的构建。
  • 您可以更好地控制要重新启动应用程序的哪个部分。

继续@Terenzio Berni的回答,

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        string strCmdText = @"/K cd ""{Location Of Angular App}"" & npm start";
        System.Diagnostics.Process.Start("CMD.exe", strCmdText);
        Thread.Sleep(7000);
        spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
    }
});

应该有助于避免需要手动启动角度项目。 调整 sleep 参数,让 angular 有足够的时间启动和运行。 这确实会使调试输出变得有点模糊,因此启动第二个命令提示符可能是一个更好的主意。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM