# Creating an Angular Application with an ASP.NET Core Backend > This tutorial will show you how to use the Angular version of the TX Text Control within an ASP.NET Core Web application as the back end to be used. - **Author:** Bjoern Meyer - **Published:** 2023-05-05 - **Modified:** 2025-11-16 - **Description:** This tutorial will show you how to use the Angular version of the TX Text Control within an ASP.NET Core Web application as the back end to be used. - **3 min read** (562 words) - **Tags:** - ASP.NET Core - Angular - Backend - Document Editor - **Web URL:** https://www.textcontrol.com/blog/2023/05/05/creating-an-angular-application-with-an-aspnet-core-backend/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/05/05/creating-an-angular-application-with-an-aspnet-core-backend/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/05/05/creating-an-angular-application-with-an-aspnet-core-backend/llms-full.txt --- [TX Text Control for Angular](https://www.textcontrol.com/product/client-package/) requires a backend for the document editor and viewer. This step-by-step walkthrough shows you how to create the ASP.NET Core backend. > ### Prerequisites > > In order to create a backend application, [TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) must be installed on your machine. When deploying this backend application, refer to the documentation to learn how to install the required TCP Service: > > - [Development and Redistribution](https://docs.textcontrol.com/textcontrol/asp-dotnet/article.aspnet.requirements.htm) ### Creating the Project The following tutorial will show you how to create an *ASP.NET Core with Angular* application that includes the client-side npm package and the required backend middleware. 1. In Visual Studio 2022, create a new project, select *ASP.NET Core with Angular* as the project template and continue with *Next*. ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2023/05/05/a/assets/visualstudio1.webp "Creating the application") 2. Select a project name, location and solution name in the next dialog and confirm with *Next*. 3. In the last dialog, select *.NET 6 (Long-term support)* as the *Framework* and confirm with *Create*. #### Adding NuGet Packages 4. In the *Solution Explorer*, select your created project and choose *Manage NuGet Packages...* from the *Project* main menu. Select *Text Control Offline Packages* from the *Package source* drop-down. *Install* the latest versions of the following packages: - *TXTextControl.TextControl.ASP.SDK* - *TXTextControl.Web* - *TXTextControl.Web.DocumentViewer* ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2023/05/05/a/assets/visualstudio2.webp "ASP.NET Core Web Application") ### Adding the Middleware 5. Open the *Program.cs* file located in the project's root folder. Replace the content with the following code: ``` var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); builder.Services.AddCors(p => p.AddPolicy("corsapp", builder => { builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader(); })); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseCors("corsapp"); // enable Web Sockets app.UseWebSockets(); // adding the TX Text Control WebSocket middleware app.UseTXWebSocketMiddleware(); // adding the viewer endpoint routing app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=TextControl}/{action}"); }); app.MapControllerRoute( name: "default", pattern: "{controller}/{action=Index}/{id?}"); app.MapFallbackToFile("index.html"); ; app.Run(); ``` ### Adding npm Packages The Angular application has already been created by the Visual Studio project template and is available in the *ClientApp* folder in the *Solution Explorer*. 6. Find the *ClientApp* folder in the *Solution Explorer* and choose *Open in Terminal* from the right-click context menu. ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2023/05/05/a/assets/visualstudio3.webp "ASP.NET Core Web Application") 7. Install the TX Text Control document editor package by typing in the following command: ``` ng add @txtextcontrol/tx-ng-document-editor ``` 8. Open the file *src -> app -> home -> home.component.html*, replace the complete file with the following code and save it: ```
``` 9. Be sure to replace the port number (**7282** in this example) with the port number of your hosting application. You can find this port number in the *launchSettings.json* file. ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2023/05/05/a/assets/visualstudio4.webp "ASP.NET Core Web Application") 10. Compile and start the application. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Changing the Language in the Angular Document Editor Using the Resource Kit](https://www.textcontrol.com/blog/2025/03/05/changing-the-language-in-the-angular-document-editor-using-the-resource-kit/llms.txt) - [Getting Started Video Tutorial: How to use the Document Editor in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-angular/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Load Balancing: Using Different TCP Service Locations using a Custom WebSocketHandler](https://www.textcontrol.com/blog/2021/11/02/using-different-tcp-service-locations/llms.txt) - [Angular: Deploying the Backend TCP Service Separately](https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms.txt) - [5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/09/5-layout-patterns-for-integrating-the-tx-text-control-document-editor-in-aspnet-core-csharp/llms.txt) - [Introducing Text Control Agent Skills](https://www.textcontrol.com/blog/2026/03/27/introducing-text-control-agent-skills/llms.txt) - [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/llms.txt) - [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt) - [ASP.NET Core Document Editor with Backend via the Text Control Private NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/aspnet-core-document-editor-private-nuget-feed/llms.txt) - [Why Document Processing Libraries Require a Document Editor](https://www.textcontrol.com/blog/2025/12/04/why-document-processing-libraries-require-a-document-editor/llms.txt) - [Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text Control](https://www.textcontrol.com/blog/2025/09/09/format-painter-in-asp-dotnet-core-building-custom-text-formatting-with-tx-text-control/llms.txt) - [Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux](https://www.textcontrol.com/blog/2025/07/29/getting-started-video-tutorial-document-editor-aspnet-core-csharp-linux/llms.txt) - [Deploying the TX Text Control Document Editor Backend Web Server in Docker](https://www.textcontrol.com/blog/2025/04/10/deploying-the-tx-text-control-document-editor-backend-web-server-in-docker/llms.txt) - [Reuse Persistent Document Editor Components in Angular SPA Applications](https://www.textcontrol.com/blog/2025/04/03/reuse-persistent-document-editor-components-in-angular-spa-applications/llms.txt) - [Configuring the TX Text Control Document Editor Backend Web Server, including Port and Logging](https://www.textcontrol.com/blog/2025/03/28/configuring-the-tx-text-control-document-editor-backend-web-server-including-port-and-logging/llms.txt) - [Designing a Maintainable PDF Generation Web API in ASP.NET Core (Linux) C# with Clean Architecture and TX Text Control](https://www.textcontrol.com/blog/2025/03/27/designing-a-maintainable-pdf-generation-web-api-in-asp-net-core-linux-c-sharp-with-clean-architecture-and-tx-text-control/llms.txt) - [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt) - [TX Text Control for Blazor: Mail Merge Integration Tutorial](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-for-blazor-mail-merge-integration-tutorial/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Editor for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms.txt) - [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt) - [Introducing TXTextControl.Web.Server.Core: A Cross-Platform Backend for TX Text Control Document Editor](https://www.textcontrol.com/blog/2025/03/13/introducing-txtextcontrol-web-server-core-a-cross-platform-backend-for-tx-text-control-document-editor/llms.txt)