Angular-cli: TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds

[UnChallengeD]

I'm getting TimeoutException after upgrading to angular 9. I'm using visual studio, ASP .NET core with angular. Even if i create new project and update angular to 9 version, It stops working
Complete list of page response :

TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information.
Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout<T>(Task<T> task, TimeSpan timeoutDelay, string message)
Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task<Uri> baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s)
Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

My package.json file is :

{
  "name": "webapplication10",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run WebApplication10:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.0.0",
    "@angular/cdk": "~9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/forms": "9.0.0",
    "@angular/material": "~9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "core-js": "^3.6.4",
    "jquery": "3.4.1",
    "oidc-client": "^1.10.1",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular/cli": "9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@types/jasmine": "^3.5.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^12.12.27",
    "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": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "typescript": "3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

[alan-agius4]

Can you kindly provide a minimal reproduction and a list of steps to reproduce?

Thanks

[UnChallengeD]

Reproduction
I simply create a new project in visual studio 2019, select Asp.net and angular.
projects works fine.
then I update angular 8 to angular 9 by using
ng update @angular/core @angular/cli
it updates and when I run project It gives me that error

Other technical details
Microsoft Visual Studio Community 2019 Version 16.4.5
Microsoft .NET Framework Version 4.8.03752
ASP.NET and Web Tools 2019 16.4.460.23317
I solved this issue by
So I asked stackoverflow community (https://stackoverflow.com/q/60189930/7979535) and found that this issue is known https://github.com/dotnet/aspnetcore/issues/17277#issue-526272056

[Javaman2]

To recreate this problem, open Visual Studio 2019, then create an ASP.NET Core Angular web app. It will create with Angular 8 in package.json. Now run NG Update and note the fun about to begin.

Just when you think you have it all ready to go, start the project using IIS express (the default server for VS2019). After the failure run ng --versio .

Angular CLI: 9.0.5
Node: 12.14.1
OS: win32 x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.900.5
@angular-devkit/build-angular              0.900.5
@angular-devkit/build-optimizer            0.900.5
@angular-devkit/build-webpack              0.900.5
@angular-devkit/core                       9.0.5
@angular-devkit/schematics                 9.0.5
@ngtools/webpack                           9.0.5
@nguniversal/module-map-ngfactory-loader   8.2.6
@schematics/angular                        9.0.5
@schematics/update                         0.900.5
rxjs                                       6.5.4
typescript                                 3.7.5
webpack                                    4.41.2

I also had to upgrade Typescript to 3.7.5 per the compile warning. I think NG Update should do that automatically.

[Rabbid76]

Do you use the most recent version of TypeScript? Try:

npm install -g typescript@latest

And read How to update TypeScript to latest version with npm?

[sherif-elmetainy]

I had the exact same problem, and it turned out that the IIS process on my PC (that launches the ng serve process) which runs as another user didn't have write permission on the node_modules folder. So when I debugged the aspnet core application in VS2019, I would saw in the dotnet core debug log an EPERM error. Apparently this is related to ivy ngcc compiling all packages the first time the application runs and it needs to write to the node_modules folder.

After I changed the permission on the node_modules folder, it worked fine. Your problem can be something else, but probably it is an error encountered by ng serve preventing it from compiling and starting the app, and the error can be checked if you look at the debug log.

[dhedrick-cl]

I had the exact same problem, and it turned out that the IIS process on my PC (that launches the ng serve process) which runs as another user didn't have write permission on the node_modules folder. So when I debugged the aspnet core application in VS2019, I would saw in the dotnet core debug log an EPERM error. Apparently this is related to ivy ngcc compiling all packages the first time the application runs and it needs to write to the node_modules folder.

After I changed the permission on the node_modules folder, it worked fine. Your problem can be something else, but probably it is an error encountered by ng serve preventing it from compiling and starting the app, and the error can be checked if you look at the debug log.

Can you put an example of what you did to give permissions to that folder?

[DrLeh]

For me, I created a new .net core app with Angular option. I deleted the ClientApp folder and did ng new ClientApp because I couldn't figure out how to get it updated. I ran the site and it worked fine, showed the "angular is running!" landing page. Then I added a component via ng g component myComponent and f5'd in VS and now I'm getting this error.

[dc-m]

For me, I created a new .net core app with Angular option. I deleted the ClientApp folder and did ng new ClientApp because I couldn't figure out how to get it updated. I ran the site and it worked fine, showed the "angular is running!" landing page. Then I added a component via ng g component myComponent and f5'd in VS and now I'm getting this error.

Could you (if you get some time) try the following:

Go to appsettings.json and appsetting.development.json and turn logging: default from debug to information.

I dont feel this is the right answer but for some strange reason when i did this on my app it works. Im just intrigued to know if it fixes someone elses

[DrLeh]

@dc-m my logging is currently set as such:

  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },

[iwhp]

In package.json I change ng serve to ng serve --host 0.0.0.0 and now it works...

[smatusan]

https://jasontaylor.dev/asp-net-core-angular-9-upgrade/

in ClientApp/package.json

change "start": "ng serve" to "start": "echo Starting... && ng serve"

[sherif-elmetainy]

I had the exact same problem, and it turned out that the IIS process on my PC (that launches the ng serve process) which runs as another user didn't have write permission on the node_modules folder. So when I debugged the aspnet core application in VS2019, I would saw in the dotnet core debug log an EPERM error. Apparently this is related to ivy ngcc compiling all packages the first time the application runs and it needs to write to the node_modules folder.
After I changed the permission on the node_modules folder, it worked fine. Your problem can be something else, but probably it is an error encountered by ng serve preventing it from compiling and starting the app, and the error can be checked if you look at the debug log.

Can you put an example of what you did to give permissions to that folder?

Sorry for late reply. I added granted the IIS app pool account modify permission to node_modules folder and it's subfolders and files. If the app pool is running with default app pool identity, the account would be IIS APPPOOL\<<apppool name>>.

[PeeJay]

I have had the same problem. After reading other responses I went to check permissions on the node_modules folder and discovered that there were some read-only files. Changing everything back to read-write fixed the problem. (Permissions were already set for full access btw)

Edit: I just noticed that it works normally with SSL enabled, but not when disabled. Fixing the read-only files lets it work with SSL disabled.

[canter76]

I fixed it deleting node_modules and executing "npm install" again.

[bttb]

Here is a workaround:

In package.json change the start-script from "ng serve" to "ngserve"

"scripts": {
  "start": "ngserve",

In the same directory create a file ngserve.cmd with the following content:

@echo ** Angular Live Development Server is listening on localhost:%~2, open your browser on http://localhost:%~2/ **
ng serve %1 %~2

Now Dotnet gets the line it is waiting for. After that the command ng serve will start the server (so in fact the Angular Live Development Server is not yet listening), the browser will open, and first it won't work (ng serve still compiling), but if you press reload after a while, it should be fine.

This is just a workaround, but it works for us.

[Remohub]

Buenas noches
Me sirvio mucho la ayuda de esta pagina
fui a la carpeta Ir a la carpeta C:\~\ClientApp\node_modules
y le cambie los permisos
lo hice de manera rapida con un terminal que recibe comandos linux en mi caso cmdmini
$ chmod 777 *
y con eso se soluciono
El problema son los permisos dentro de esta carpeta.
Espero mi aporte aunque esta en español les sirva a algunos de ustedes sobre todo a los de habla Hispana.

[dnalrehtus]

The bttb workaround is the fix that finally worked for me. I have been following this issue for months and have tried all the previous suggestions but none of them worked for me. Thank you bttb. The only way I could get the angular page to start was to make a dummy change to the angular code and then save the change, which was irritating and a real waste of time.

[jonab12]

In package.json I change ng serve to ng serve --host 0.0.0.0 and now it works...

Can I buy you a beer? Be your servant? Make you breakfast everyday. Holy shit I spent so long on this problem and you solved it

[dnishimoto]

why does "start": "echo Starting... && ng serve", work?

[mikejunt]

Because this problem frequently occurs due to the initial build time of ng serve exceeding the programmed timeout window of the .NET SPA service, so by giving it the echo, the .NET SPA service receives some data and believes it's connected.

[Manit-Chanthavong]

I tried all of the above an nothing worked. Then ran ng build in the ClientApp and found some typescript errors not caught by .net spaservices. The runtime compiler and ng build seems to have different results.

[alan-agius4]

I'm sorry, but this issue is not caused by Angular CLI.

This is being tracked in https://github.com/dotnet/aspnetcore/issues/17277

[sendilkumarmv]

I faced the same issue even after tried almost all fix given here. Finally increasing the timeout as below solved my issue

spa.Options.StartupTimeout = new System.TimeSpan(0, 0, 2, 0, 0);

Not sure what I did is the appropriate solution.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}