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!
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:
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: