Simple way to keep Front-end Angular 5 and back-end Web API code separate?

Question

I have developed an Angular 5 app with plenty of moving parts (Services, Bootstrap, Angular Material, internal+external JS scripts, etc). Now I want to add database connectivity to this app as well (MS SQL Server only). The app has been developed in Visual Studio Code.

I am following this tutorial from MSDN in order to learn how to connect this app with an SQL Server database. I believe I'll need Web API and .NET Core support for connectivity, and I can't find out a way to do that without starting from scratch in either of the VS Code (e.g. here) or Visual Studio (like in the referenced article) since almost all the articles/tutorials I could find on the topic begin from scratch. The way I see it, creating a new Angular + Core project in Visual Studio and migrating the app logic there file-by-file is not a feasible solution for me.

My questions are:

• Is there a simple way to create a separate Web API-based back-end app which serves data from my SQL Server database for the front-end Angular 5 app to consume? Or would all the .NET Core, Web API, and Angular front-end support be rendered from the same app?
• If not, is there a simple/official way to add .NET Core and Web API functionality to an Angular 5 app built in VS Code?

Answer 1

I propose you to create a separate project which contains the REST-Endpoint with ASP.NET Core.

Here you find a simple tutorial:

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

With this solution your server is decoupled from client. Maybe in future you like to use something other than angular or you like to create an other client (for example a native mobile app). In this case you do not have to change your server project.

(In the case you are working with visual studio take a look to the projecttemplate. There is every thing you need.