How to properly compute Web API methods URLs in TypeScript within ASP.NET Core 1.1. solution?

Question

I am trying to set up a Visual Studio 2017 ASP.NET Core 1.1 solution to work with an Angular2 SPA.

I have created a sample csproj using the following commands:

npm install -g yo generator-aspnetcore-spa
yo aspnetcore-spa

and then opened it in Visual Studio 2017 Community Edition.

When running using IIS Express 10, it works fine (routing, refresh, Web API calls). However, when deploying within a Web Application under IIS, Web API calls fails due to path not containing Web application name:

fetchdata.component.ts file defines data fetch as follows:

constructor(http: Http) {
    http.get('/api/SampleData/WeatherForecasts').subscribe(result => {
        this.forecasts = result.json() as WeatherForecast[];
    });
}

This works fine in IIS Express, as path http://localhost:port/api/SampleData/WeatherForecasts is correct. However, this fails under IIS because the correct path is:

http://localhost:port/ApplicationName/api/SampleData/WeatherForecasts

Hardcoding application name in URL works, but this is not a viable solution.

I have changed _Layout.cshtml to properly set base (path), but it does not work:

<!DOCTYPE html>
@{ 
    string basePath = Url.Content("~");
}
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - WebApplicationBasic</title>
        <base href="@basePath" />
        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
    </head>
    <body>
        Base path: @basePath

        @RenderBody()

        @RenderSection("scripts", required: false)
    </body>
</html>

If I understood correctly, the path is assumed to be relative to tsconfig.json file which is placed outside wwwroot folder. That would explain why all path from js generated from ts do not take web application folder into account.

Question: How can I dynamically specify URL prefix for calls with TypeScript files?

Community · Accepted Answer · 2017-05-23 12:17:43Z

1

You have to use a relative path instead of absolute path. Just remove the / from your http.get(...) calls.

You have already correctly set up the base path (which also works easier by doing <base href="~/"/>). This will make sure that the base path is always used as starting point for relative urls. This also applies to ajax calls. All new browsers already support <base href=""/>. Also see my former post here.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 22, 2017 at 11:46

Tseng

64.5k18 gold badges200 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexei - check Codidact Over a year ago

Yes, it works. Thank you! I had two mistakes in my code: <base href="@basePath" /> should be <base href="@basePath/" /> or <base href="~/"/> and remove the extra / as you mentioned.

Collectives™ on Stack Overflow

How to properly compute Web API methods URLs in TypeScript within ASP.NET Core 1.1. solution?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related