CODEWITHSUNDEEP
angularasp.net-web-api2
Flea
Flea

Reputation: 11284

How to properly setup Angular2 and WebAPI 2.0 in Visual Studio 2015 and deploy to IIS

My team and I are working on a new green field project and we will be using Visual Studio 2015. Our client application will be entirely developed in Angular 2 and our api will be developed using ASP.NET Web API 2.0

Here is how I have structured my solution thus far:

Angular2: Using an ASP.NET MVC5 .NET 4.6.2 Empty Template

WebAPI2: Using ASP.NET WebAPI 2 Template

Solution Explorer

I have the Web API project mapped to my Local IIS server:

Web API IIS

and I have the Angular 2 application mapped to use IIS Express.

enter image description here

When I run this locally, I have to enable CORS on the Web API project to make these two applications work together.

CORS

and then in my Angular 2 application I am having to hard code the entire URL:

Hard Coded URL

So my questions are this:

  1. Is this the best way in Visual Studio to have a Angular 2 and Web API project setup?

  2. Is it possible to not have to use CORS? This seems like it would be problematic not only for local developement but when going to Dev, Stage and Production!

  3. Is it possible to architect this as such as that both the Angular2 and the WebAPI are living under the same IIS virtual directory so that in my Angular 2 project I can just call const URL_CUSTOMER = 'api/Customers'; and not a fully qualified domain like I have it now?

I appreciate any guidance on best practices for architecting this solution better than I have it now! Thank you!

Upvotes: 3

Views: 4426

Answers (1)

vidalsasoon
vidalsasoon

Reputation: 4401

My opinions

1) Is this the best way in Visual Studio to have a Angular 2 and Web API project setup?*

Seems pretty good but I would use Local IIS for both your angular app and web api. ex: http://myapp.localhost.com and http://myappapi.localhost.com

2) Is it possible to not have to use CORS? This seems like it would be problematic not only for local developement but when going to Dev, Stage and Production!*

If you want different domains like it seems you do, you need to support CORS or else all your HTTP requests need to be JSONP which isn't good IMO.

3) Is it possible to architect this as such as that both the Angular2 and the WebAPI are living under the same IIS virtual directory so that in my Angular 2 project I can just call const URL_CUSTOMER = 'api/Customers'; and not a fully qualified domain like I have it now?*

You need to somehow set the API url in your web.config AppSettings (or any back-end settings) and then pass it along to your angular app. It's never going to be a relative path either locally or in production so you have to adapt to that.

Upvotes: 4

Related Questions