CODEWITHSUNDEEP
angularvisual-studio-2017
Gareth Doherty
Gareth Doherty

Reputation: 197

Create Standalone Angular Project in Visual Studio

My company predominantly use Visual Studio (currently 2017) for all development due to its easy integration with Azure DevOps for source control etc.

I have been asked to start looking into building enterprise apps with Angular using a .NET Core Web API backend.

I have already made a start with the Web API and now I want to build the Angular frontend.

Q. How can I create a separate Angular project in Visual Studio. I don't want my Angular code sitting in the same Web API project (how the Visual Studio Template tries to do it)

I have built Angular apps in VS Code before, but I have yet found a convenient extension to allow me to push code changes to Azure DevOps repo.

Sorry if this has been answered before, but I haven't been able to find the answer.

Upvotes: 0

Views: 1451

Answers (1)

tobyb
tobyb

Reputation: 746

There are probably quite a few ways to do this, but here is the way I do it:

project
  backend
     backend.sln
     backend (folder with your vanilla Web API project)
  frontend
     angular.json
     package.json
     src (folder with your Angular CLI project)

So from a creation perspective, you'd just do something like (using Windows)

mkdir project

cd project

dotnet new webapi backend -o backend

ng new frontend

The last bit is configuring your Angular app to point to your local web api for development. We accomplish this with a config.json file that gets loaded from a ConfigService in Angular, doing something like this. Our config.json looks something like this:

{
  "environment": "DEV",
  "apiUrl": "http://localhost:17967/",
}

You'd change that, obviously, for production. Not sure that's what you're looking for, but maybe gives you some ideas?

Upvotes: 1

Related Questions