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.

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.

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

Prerequisites

Make sure to install the following:

• Visual Studio 2022 version 17.8 or later with theASP.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 toTools >Get Tools and Features..., which opens the Visual Studio Installer. Choose theASP.NET and web development workload, then chooseModify.
• npm (https://www.npmjs.com/), which is included with Node.js
• Angular CLI (https://angular.dev/tools/cli), which can be the version of your choice. The front-end project is created using the framework CLI tools you have installed on your local machine, so this determines the Angular version used in the template.

Create the app

1. In the Start window (chooseFile >Start Window to open), selectCreate a new project.

   

2. Search for Angular in the search bar at the top and then selectAngular and ASP.NET Core.

   

3. Name the projectAngularWithASP and then selectNext.

   In the Additional Information dialog, make sure thatConfigure for HTTPS is enabled. In most scenarios, leave the other settings at the default values.

4. SelectCreate.

   Solution Explorer shows the following:

   

   Compared to thestandalone Angular template, you see some new and modified files for integration with ASP.NET Core:

   • aspnetcore-https.js
   • proxy.conf.js
   • package.json(modified)
   • angular.json(modified)
   • app.components.ts
   • app.module.ts

   For more information on some of these project files, seeNext steps.

Set the project properties

1. In Solution Explorer, right-click theAngularWithASP.Server project and chooseProperties.

   

2. In the Properties page, open theDebug tab and selectOpen debug launch profiles UI option. Uncheck theLaunch Browser option for thehttps profile or the profile named after the ASP.NET Core project, if present.

   

   This value prevents opening the web page with the source weather data.

   Note

   In Visual Studio,launch.json stores the startup settings associated with theStart button in the Debug toolbar.launch.json must be located under the.vscode folder.

3. Right-click the solution in Solution Explorer and selectProperties. Verify that the Startup project settings are set toMultiple projects, and that the Action for both projects is set toStart.

Start the project

PressF5 or select theStart button at the top of the window to start the app. Two command prompts appear:

• The ASP.NET Core API project running
• The Angular CLI running the ng start command

The Angular app appears and is populated via the API (the localhost port may vary from the screenshot).

If you don't see the weather forecast data in the browser, seeTroubleshooting.

Publish the project

Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.

1. In Solution Explorer, right-click theAngularWithASP.Server project and selectAdd >Project Reference.

   Make sure theangularwithasp.client project is selected.

2. ChooseOK.

3. Right-click the ASP.NET Core project again and selectEdit Project File.

   This opens the.csproj file for the project.

4. In the.csproj file, make sure the project reference includes a<ReferenceOutputAssembly> element with the value set tofalse.

   This reference should look like the following:

    <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">   <ReferenceOutputAssembly>false</ReferenceOutputAssembly> </ProjectReference>

5. Right-click the ASP.NET Core project and chooseReload Project if that option is available.

6. InProgram.cs, make sure the following code is present.

   app.UseDefaultFiles();app.UseStaticFiles();// Configure the HTTP request pipeline.if (app.Environment.IsDevelopment()){   app.UseSwagger();   app.UseSwaggerUI();}

7. To publish, right click the ASP.NET Core project, choosePublish, and select options to match your desired publish scenario, such as Azure, publish to a folder, etc.

   The publish process takes more time than it does for just an ASP.NET Core project, since thenpm run build command gets invoked when publishing. TheBuildCommand runsnpm run build by default.

   If you publish to a folder, seeASP.NET Core directory structure for more information on the files added to thepublish folder.

Troubleshooting

Proxy error

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.
• Also, verify that the backend is configured to start before the front end. To verify, select the solution in Solution Explorer, chooseProperties from theProject menu. Next, selectConfigure Startup Projects and make sure that the backend ASP.NET Core project is first in the list. If it's not first, select the project and use the Up arrow button to make it the first project in the launch list.

Verify port

If the weather data doesn't load correctly, you may also need to verify that your ports are correct.

1. Go to thelaunchSettings.json file in your ASP.NET Core project (in theProperties folder). Get the port number from theapplicationUrl property.

   If there are multipleapplicationUrl properties, look for one using anhttps endpoint. It should look similar tohttps://localhost:7049.

2. Then, go to theproxy.conf.js file for your Angular project (look in thesrc folder). Update the target property to match theapplicationUrl property inlaunchSettings.json. When you update it, that value should look similar to this:

   target: 'https://localhost:7049',

Docker

If you create the project withDocker support enabled, take the following steps:

1. After the app loads, get the Docker HTTPS port using theContainers window in Visual Studio. Check theEnvironment orPorts tab.

   

2. Open theproxy.conf.js file for the Angular project. Update thetarget variable to match the HTTPS port in the Containers window. For example, in the following code:

   const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';

   Changehttps://localhost:7209 to the matching HTTPS port (in this example,https://localhost:62958).

   Note

   If the HTTPS port is missing in the Containers window, you can uselaunchSettings.json file to add the port. In the sectionContainer (Dockerfile) and after the entry"useSSL": true, add"sslPort": <any port>. In this example, use the following:"sslPort": 62958.

3. Restart the app.

Next steps

For more information about SPA applications in ASP.NET Core, see the Angular section underDeveloping Single Page Apps. The linked article provides additional context for project files such asaspnetcore-https.js andproxy.conf.js, although details of the implementation are different due to project template differences. For example, instead of a ClientApp folder, the Angular files are contained in a separate project.

For MSBuild information specific to the client project, seeMSBuild properties for JSPS.