簡體   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