Skip to content

aspnetcore 3.1 angular project timeout on MacOS #18820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stuki opened this issue Feb 5, 2020 · 13 comments
Closed

aspnetcore 3.1 angular project timeout on MacOS #18820

stuki opened this issue Feb 5, 2020 · 13 comments
Labels
area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates feature-spa
Milestone

Comments

@stuki
Copy link

stuki commented Feb 5, 2020

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]
@javiercn javiercn added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label Feb 5, 2020
@pranavkm
Copy link
Contributor

pranavkm commented Feb 5, 2020

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

@ajaybhargavb
Copy link
Contributor

@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)

@ajaybhargavb ajaybhargavb removed their assignment Feb 5, 2020
@stuki
Copy link
Author

stuki commented Feb 6, 2020

@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
Copy link

@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
Copy link

geferon commented Feb 13, 2020

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
Copy link

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
Copy link

@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
Copy link

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

@dcchristopher
Copy link

dcchristopher commented Apr 17, 2020

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
Copy link

David-Ben-Mesecke commented Apr 17, 2020

@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
Copy link

David-Ben-Mesecke commented Apr 17, 2020

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
Copy link
Contributor

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

@mkArtakMSFT
Copy link
Contributor

#14076

@ghost ghost locked as resolved and limited conversation to collaborators Jul 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates feature-spa
Projects
None yet
Development

No branches or pull requests

9 participants