Backend

TX Text Control for Angular 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 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

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.

In Visual Studio 2022, create a new project, select ASP.NET Core with Angular as the project template and continue with Next .

Select a project name, location and solution name in the next dialog and confirm with Next .

In the last dialog, select .NET 6 (Long-term support) as the Framework and confirm with Create .

Adding NuGet Packages

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

Adding the Middleware

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 .

Find the ClientApp folder in the Solution Explorer and choose Open in Terminal from the right-click context menu.

Install the TX Text Control document editor package by typing in the following command:

ng add @txtextcontrol/tx-ng-document-editor Open the file src -> app -> home -> home.component.html , replace the complete file with the following code and save it:

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.

Compile and start the application.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Backend

Post tagged with Backend in 2023

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Backend

Post tagged with Backend in 2023 ​

May 2023

Post tagged with Backend in 2023