Giters

aspnet / Templating

[Archived] ASP.NET Core templates for .NET CLI and Visual Studio. Project moved to https://github.com/aspnet/AspNetCore

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

API in Angular template does not work during local development

rgwood opened this issue · comments

commented

Hi,

I was giving the Angular template that comes installed with .NET Core a try, and I ran into an issue when running it locally using dotnet run. I can open the Angular front-end, but it's not able to talk to the ASP.NET Core back-end API because it uses the wrong port.

Steps to reproduce

mkdir angulartest
cd angulartest
dotnet new angular
dotnet run

The console will print something like:

Now listening on: https://localhost:5001
Now listening on: http://localhost:5000
...
** NG Live Development Server is listening on localhost: 50863, open your browser on http://localhost:50863/ **

Open http://localhost:50863/ in your local browser, then navigate to the "Fetch data" section. It will be stuck and unable to load data from the back-end:
screen shot 2018-11-05 at 8 42 58 pm

In the JS console, it becomes obvious that it's trying to call the back-end on port 50863:
screen shot 2018-11-05 at 8 44 42 pm

I am able to call the API successfully at https://localhost:5001/api/SampleData/WeatherForecasts

Environment

macOS 10.14, Safari 12.0 (14606.1.36.1.9), .NET Core SDK version 2.1.403.

I was able to reproduce this issue with the "stock" version of the template. I also tried installing the latest prerelease version of Microsoft.DotNet.Web.Spa.ProjectTemplates by running dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.2.0-preview3-35497, and was able to reproduce the issue with that version as well.

dotnet --info output:

.NET Core SDK (reflecting any global.json):
 Version:   2.1.403
 Commit:    04e15494b6

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

Host (useful for support):
  Version: 2.1.5
  Commit:  290303f510

.NET Core SDKs installed:
  2.1.4 [/usr/local/share/dotnet/sdk]
  2.1.105 [/usr/local/share/dotnet/sdk]
  2.1.302 [/usr/local/share/dotnet/sdk]
  2.1.403 [/usr/local/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.2 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.5 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.2 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.5 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.0.5 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.0.7 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.2 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.5 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
commented

Thanks for contacting us, @rgwood.
@ryanbrandenburg, can you please look into this? Thanks!

commented

Don't open your browser to http://localhost:50863/. That's the angular server directly, instead go to https://localhost:5001, that's the AspNet server, which should make sure all your endpoints are pointed at the right location.

I know it's kind of confusing to have ** NG Live Development Server is listening on localhost: 50863, open your browser on http://localhost:50863/ ** in the console and not actually do it, but that's straight out of the angular cli, so the only way we would keep it from showing is to not pipe angular output to the main console (which would make is super hard to diagnose stuff).

That should get you sorted, if you're still having trouble feel free to re-open.

commented

Whoops - that makes sense, thanks for clearing it up!