aspnetcore 3.1 angular project timeout on MacOS

[stuki]

Describe the bug

Creating a new project using dotnet new angular -o my-app does not create a working project. The project stalls on serving the angular frontend, resulting in timeouts.

To Reproduce

1) Create a new angular project using the dotnet cli on MacOS (dotnet new angular -o my-app)
2) Change folder to the new project (cd my-app)
3) Build project (dotnet build)
4) Run project (dotnet run)
5) Open the provided url

What happens:
The request hangs for a while (depending on the spa.Options.StartupTimeout set) and then fails.

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/stuki/Code/temp/my-app
fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]
      An unhandled exception has occurred while executing the request.
System.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.
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout[T](Task`1 task, TimeSpan timeoutDelay, String message)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task`1 baseUriTask, CancellationToken applicationStoppingToken, Boolean proxy404s)
   at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

On closer inspection, dotnet build does not even install the packages for the angular project.

What I expect to happen:
The backend should automatically start the frontend, and render the front page. dotnet build should install npm packages for the frontend project

Further technical details

.NET Core SDK (reflecting any global.json):
 Version:   3.1.100
 Commit:    cd82f021f4

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.15
 OS Platform: Darwin
 RID:         osx.10.15-x64
 Base Path:   /usr/local/share/dotnet/sdk/3.1.100/

Host (useful for support):
  Version: 3.1.0
  Commit:  65f04fb6db

.NET Core SDKs installed:
  2.1.700 [/usr/local/share/dotnet/sdk]
  2.2.301 [/usr/local/share/dotnet/sdk]
  3.0.100 [/usr/local/share/dotnet/sdk]
  3.1.100 [/usr/local/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.11 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.6 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.11 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.6 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.11 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.6 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

[pranavkm]

@ajaybhargavb can you reproduce this on an OSX machine? We have automated tests for this running on Windows, so this seems suspect.

[ajaybhargavb]

@ajaybhargavb can you reproduce this on an OSX machine? We have automated tests for this running on Windows, so this seems suspect.

I tried it and I can't reproduce this. Here is my dotnet --info,

.NET Core SDK (reflecting any global.json):
 Version:   3.1.100
 Commit:    cd82f021f4

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.15
 OS Platform: Darwin
 RID:         osx.10.15-x64
 Base Path:   /usr/local/share/dotnet/sdk/3.1.100/

Host (useful for support):
  Version: 3.1.0
  Commit:  65f04fb6db

@stuki, this could be something to do with a borked npm installation. Here is my dotnet build output for comparison,

dotnet build

dotnet build
Microsoft (R) Build Engine version 16.4.0+e901037fe for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restore completed in 33.07 ms for /Users/ajbaaska/Github/temp/AngularTest/AngularTest.csproj.
  AngularTest -> /Users/ajbaaska/Github/temp/AngularTest/bin/Debug/netcoreapp3.1/AngularTest.dll
  AngularTest -> /Users/ajbaaska/Github/temp/AngularTest/bin/Debug/netcoreapp3.1/AngularTest.Views.dll
  v10.15.3
  Restoring dependencies using 'npm'. This may take several minutes...
dotnet run
  > [email protected] install /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/@angular/compiler-cli/node_modules/fsevents
  > node install

  node-pre-gyp WARN Using request for node-pre-gyp https download
  [fsevents] Success: "/Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/@angular/compiler-cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

  > [email protected] install /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/watchpack/node_modules/fsevents
  > node install

  node-pre-gyp WARN Using request for node-pre-gyp https download
  [fsevents] Success: "/Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/watchpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

  > [email protected] install /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/webpack-dev-server/node_modules/fsevents
  > node install

  node-pre-gyp WARN Using request for node-pre-gyp https download
  [fsevents] Success: "/Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/webpack-dev-server/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

  > [email protected] install /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/node-sass
  > node scripts/install.js

  Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/darwin-x64-64_binding.node
  Download complete
  Binary saved to /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/node-sass/vendor/darwin-x64-64/binding.node
  Caching binary to /Users/ajbaaska/.npm/node-sass/4.13.0/darwin-x64-64_binding.node

  > [email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/core-js
  > node scripts/postinstall || echo "ignore"

  Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

  The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
  > https://opencollective.com/core-js
  > https://www.patreon.com/zloirock

  Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


  > [email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/babel-runtime/node_modules/core-js
  > node postinstall || echo "ignore"

  Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

  The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
  > https://opencollective.com/core-js
  > https://www.patreon.com/zloirock

  Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


  > [email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/oidc-client/node_modules/core-js
  > node postinstall || echo "ignore"


  > @angular/[email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/@angular/cli
  > node ./bin/postinstall/script.js


  > [email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/core-js
  > node postinstall || echo "ignore"


  > [email protected] postinstall /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/node-sass
  > node scripts/build.js

  (node:5609) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
  Binary found at /Users/ajbaaska/Github/temp/AngularTest/ClientApp/node_modules/node-sass/vendor/darwin-x64-64/binding.node
  Testing binary
  Binary is fine
  added 1534 packages from 1126 contributors and audited 17096 packages in 27.085s
  found 9 vulnerabilities (1 low, 3 moderate, 5 high)
    run `npm audit fix` to fix them, or `npm audit` for details

Build succeeded.
    0 Warning(s)
    0 Error(s)

[stuki]

@ajaybhargavb Thanks for testing! I reinstalled node and got at least the build steps working. But it still does not start the Angular project for me. I tried with node v10.19.0 and v12.15.0.

I redid the steps in Windows and the project got up and running, but no such luck on MacOS.

If I go to the ClientApp folder and run it manually (npm start) it starts normally and I can open the webpage. So I could technically get it to work if I separate the projects from each other, but I don't want to do that right now for our project.

[David-Ben-Mesecke]

@stuki Hei Oscar, tjenare... ;) I had the same problem after upgrading to angular 9, if your version is angular 9 the following might help.

Based on my working workaround, this problems is due to conflicting pre renderers between angular 9 and .net, all versions I think. Also visual studio at least with windows uses typescript version 3.7.0 while Angular 9 uses 3.7.5 yet is perfectly happy with 3.7.0 so change to that in your package json, also comment out the following line in your main.ts: export { renderModule, renderModuleFactory } from '@angular/platform-server'; I am still playing about with it so in my package.json I have "aspnet-prerendering": "3.0.1" that is where I think the main conflict lies. Doing that makes my solution work again under angular 9

I will try tro remove the "aspnet-prerendering": "3.0.1" instead of the last line in my main.ts since "aspnet-prerendering": "3.0.1" is obsolete and no longer supported.

Not sure if that is what causes your problems, but that is where I would start. Let me know if this solved it for you or if you got other error messages plaguing you...

[geferon]

I had this same problem on Windows as well with Angular 9, simply uninstalling the "aspnet-prerendering" (now deprecated) package fixed the loading for me, now when starting the project it doesn't time out, and works just as intended.

[David-Ben-Mesecke]

I had this same problem on Windows as well with Angular 9, simply uninstalling the "aspnet/prerendering" (now deprecated) package fixed the loading for me, now when starting the project it doesn't time out, and works just as intended.

Thanks, I've been trying that and failing, possibly due to a failed ssr installation, working with removing it all...

[David-Ben-Mesecke]

@geferon unfortunately, no joy, if I do not use aspnet-prerendering I need to use the @angular/platform-server to spin it up yet I am not using server side rendering and when I do, I get an error, with statement not allowed in strict mode... A work around i found there was to fist spin up the server using @angular/platform-server in the main.ts and then, after it spins up yet fails, comment that thing out again. Very frustrating. I am going to create a new fresh .net core 3.1 angular 9 project to see if the problem persists and if not use it to analyse my config ...frustrating...

[brunoambr]

@David-Ben-Mesecke have you found any solution? I have the same problem...

[dcchristopher]

Based on feedback found in the Windows side of things, try this combined approach:

In package.json, under "scripts", update the "start" script to:
echo Starting... && ng serve --host 0.0.0.0

Some folks seem to thing that adding the echo statement helps while others think that the --host attribute helps. I can attest to the first one helping at first, then the second one running with the baton when the first one quit making a difference! ... and this is what happens when you involve Microsoft ...

UPDATE: Worked once like a champ and then back to normal ... I'm thinking @David-Ben-Mesecke is on to something! 😂

[David-Ben-Mesecke]

@David-Ben-Mesecke have you found any solution? I have the same problem...

Sorry for the late reply. I ended up with a workaround that worked for me, simply save a ts file so that the compiler has to recompile the ts code and it works. Given it isn't a problem that translates into the release, I have not bothered to find out why, yet I suspect that the second time around, it is using the ivy compiler while visual studio is trying to use the old compiler somehow. What is important for me is that this way I get it working and I really do not restart my debug sessions often enough for me to bother about the few extra seconds it takes to compile the code a second time.

[David-Ben-Mesecke]

Based on feedback found in the Windows side of things, try this combined approach:

In package.json, under "scripts", update the "start" script to:
echo Starting... && ng serve --host 0.0.0.0

Some folks seem to thing that adding the echo statement helps while others think that the --host attribute helps. I can attest to the first one helping at first, then the second one running with the baton when the first one quit making a difference! ... and this is what happens when you involve Microsoft ...

UPDATE: Worked once like a champ and then back to normal ... I'm thinking @David-Ben-Mesecke is on to something! 😂

I tried @dcchristopher solution too, it works like a charm for me too. I guess I stick you your solution dcc, its easier since I do not have to recompile to make things work.

[mkArtakMSFT]

Thanks for contacting us.
We will consider updating to angular 9 instead of investigating this given that is going to obsolete this anyway.

[mkArtakMSFT]

14076