Tutorial: Create an ASP.NET Core app with Angular in Visual Studio
Applies to: Visual Studio Visual Studio for Mac Visual Studio Code
In this article, you learn how to build an ASP.NET Core project to act as an API backend and an Angular project to act as the UI.
Currently, Visual Studio includes ASP.NET Core Single Page Application (SPA) templates that support Angular and React. The templates provide a built in Client App folder in your ASP.NET Core projects that contains the base files and folders of each framework.
Starting in Visual Studio 2022 Preview 2, you can use the method described in this article to create ASP.NET Core Single Page Applications that:
- Put the client app in a separate project, outside from the ASP.NET Core project
- Create the client project based on the framework CLI installed on your computer
Make sure to install the following:
- Visual Studio 2022 Preview 2 or later with the ASP.NET and web development workload installed. Go to the Visual Studio downloads page to install it for free. If you need to install the workload and already have Visual Studio, go to Tools > Get Tools and Features..., which opens the Visual Studio Installer. Choose the ASP.NET and web development workload, then choose Modify.
- npm (https://www.npmjs.com/), which is included with Node.js
- Angular CLI (https://angular.io/cli) This can be the version of your choice
Create the frontend app
In the Start window (choose File > Start Window to open), select Create a new project.
Search for Angular in the search bar at the top and then select Standalone TypeScript Angular Template.
Give your project and solution a name. When you get to the Additional information window, be sure to check the Add integration for Empty ASP.NET Web API Project option. This option adds files to your Angular template so that it can be hooked up later with the ASP.NET Core project.
Once the project is created, you see some new and modified files:
Create the backend app
In Solution Explorer, right-click the solution name, hover over Add, and then select New Project.
Search and select the ASP.NET Core Web API project.
Give your project a name. When you get to the Additional information window, select .NET 6.0 as your target framework.
Once the project is created, Solution Explorer should look like this:
Set the project properties
In Solution Explorer, right-click the ASP.NET Core project and choose Properties.
Go to the Debug menu and select Open debug launch profiles UI option. Uncheck the Launch Browser option.
Currently, launch.json must be located under the .vscode folder.
Set the startup project
In Solution Explorer, right-click the solution name and select Set Startup Project. Change the startup project from Single startup project to Multiple startup projects. Select Start for each project’s action.
Next, select the backend project and move it above the frontend, so that it starts up first.
Start the project
Before you start the project, make sure that the port numbers match.
Go to the launchSettings.json file in your ASP.NET Core project (in the Properties folder). Get the port number from the
If there are multiple
applicationUrlproperties, look for one using an
httpsendpoint. It should look similar to
Then, go to the proxy.conf.js file for your Angular project (look in the src folder). Update the target property to match the
applicationUrlproperty in launchSettings.json. When you update it, that value should look similar to this:
To start the project, press F5 or select the Start button at the top of the window. You will see two command prompts appear:
- The ASP.NET Core API project running
- The Angular CLI running the ng start command
Check console output for messages, such as a message instructing you to update your version of Node.js.
You should see an Angular app appear, that is populated via the API. If you don't see the app, see Troubleshooting.
Publish the project
Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.
In Solution Explorer, right-click the ASP.NET Core project and choose Add > Project Reference.
Select the Angular project and choose OK.
Right-click the ASP.NET Core project in Solution Explorer and choose Unload Project.
This opens the .csproj file for the project.
In the .csproj file, update the project reference and add
<ReferenceOutputAssembly>with the value set to
When you've updated the reference, it should look like this (substituting your own project folder and project name).
<ProjectReference Include="..\angularprojectfolder\angularprojectname.esproj"> <ReferenceOutputAssembly>false</ReferenceOutputAssembly> </ProjectReference>
Right.click the ASP.NET Core project and choose Reload Project.
To publish, right click the ASP.NET Core project, choose Publish, and select options to match your desired publish scenario, such as Azure, publish to a folder, et al.
The publish process takes more time than it does for just an ASP.NET Core project, since the
npm run buildcommand gets invoked when publishing.
You can modify the
npm run buildcommand using the Production Build Command in the Angular project properties. To modify it, right-click the Angular project in Solution Explorer and choose Properties.
You may see the following error:
[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
If you see this issue, most likely the frontend started before the backend. Once you see the backend command prompt up and running, just refresh the Angular App in the browser.
Submit and view feedback for