Angular application does not start under dotnet core / IIS

Question

I have an angular 8 application under Visual Studio Professional 2017 Aspnet Core. If I run the application via angular cli with ng serve (or npm start) it works well, I can access the application. But if I try to start it with debug on Visual Studio with IIS, it never starts. Only error I got is {"error":"The Angular CLI process did not start listening for requests within the timeout period of XXX seconds. Check the log output for error information."}

I wrote XXX seconds because it is not about timeout, application never starts whatever timeout I set. I updated angular core packages to latest, updated Visual Studio 2017 to latest, deleted the dist folder, deleted node modules, basically tried everything I saw in the internet.

My core version is: 2.2.101

And I run Visual Studio as administrator.

Same code is working wonderfully in my colleague's PC.

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

Here is my 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"
  }
}

And here is my dotnet info.

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]

Again, if I run same code directly from angular cli, it works fine.

Any help or pointing to the right direction is really appreciated. Thank you!

Answer 1

The problem looks like a bug in how Visual studio handles the startup of the angular server in debug mode:

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

In developement mode the Startup tries to start the ng server on a random port by itself. Then something goes wrong and the redirection to the ng server does not work.

The best solution I've found so far is to:

• start the ng server by myself on port 4200 in a terminal
• change the code above

like this:

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

This workaround works 100% of the times.

The main disadvantage is that you loose the 1 button debug startup.

The advantages are:

• it works, you can debug your app without problems again
• you can track what the ng server is doing in a text colored terminal which can give you better information and advice when you change something in the angular app.
• the JavaScript debugger inside Visual Studio still works fine. If you prefer to debug in the browser you can still do it so you don't loose anything in debugging js code the way you prefer
• the startup of the C# application and IIS server it's much faster as you don't have to wait the building of the angular app.
• you can better control which part of the app you want to restart.

Answer 2

To tack on to @Terenzio Berni's answer,

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

should help with avoiding needing to start the angular project manually. Adjust the sleep parameter to allow enough time for angular to get up and running. This does cloud up the debug output a little so starting a second command prompt may be a better idea.