Angular SPA with ASP.NET Core Back-End

The TX Text Control document editor for Angular can be used in ASP.NET Core Web Applications. The back-end Web API of the ASP.NET Core Web Application can be used to load data and to merge templates created using the online editor.

This article shows how to create a new ASP.NET Core back-end Web Application with an Angular front-end SPA.

Creating the Application

The following tutorial shows how to create an ASP.NET Core 3.1 Web Application that can be deployed to Windows machines.

  1. In Visual Studio 2019 (> 16.5.4), create a new project, select ASP.NET Core Web Application as the project template and continue with Next.


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

  3. In the last dialog, select .NET Core and ASP.NET Core 3.1 as the project target, select Angular as the template and confirm with Create.


Adding TX Text Control Assemblies

  1. While the project is selected in the Solution Explorer, choose Project -> Add Reference... to open the Reference Manager. In the opened dialog, select Browse... to select the required TX Text Control assemblies. Navigate to the installation folder of TX Text Control and select the following assemblies from the Assembly folder:

    • TXDocumentServer.dll
    • TXTextControl.dll
    • TXTextControl.Server.dll
    • TXDrawing.dll


    Repeat this step with the following assemblies from the Assembly/bin64 folder:

    • txic.dll
    • txkernel.dll
    • txtools.dll
    • txpdf.dll

    After selecting these assemblies, close the Reference Manager by confirming with OK.

  2. While the project is selected in the Solution Explorer, choose Project -> Add Existing Item.... Browse to the TX Text Control installation folder and select the following files from the Assembly/bin64:

    • tx30_xml.dll
    • tx30_css.dll
    • tx30_doc.dll
    • tx30_dox.dll
    • tx30_htm.dll
    • tx30_pdf.dll
    • tx30_rtf.dll
    • tx30_xlx.dll
  3. Select the files from step 5 in the Solution Explorer and set the Copy to Output Directory to Copy always.

Adding the License

  1. While the project is selected in the Solution Explorer, choose Project -> Add New Item.... Select Text File, name the file licenses.licx and close the dialog by clicking Add.

    Open the newly added file and add the following content:

    TXTextControl.ServerTextControl, TXTextControl.Server, Version=30.0.1500.500, Culture=neutral, PublicKeyToken=6b83fe9a75cfb638

    Set the Build Action property to Embedded Resource.

    In case, you are getting compile errors (MSB6003 The specified task executable "lc.exe" could not be run.), please refer to this article:

    LC Task in .NET Core Projects

WebSocketHandler Middleware

  1. In the Solution Explorer, select your created project and choose Manage NuGet Packages... from the Project main menu.

    Browse for txtextcontrol.web and Install the latest version of the TXTextControl.Web package.


Adding the Middleware

  1. Open the Startup.cs file located in the project's root folder. In the Configure method, add the following code before the app.UseSpa entry:

    // enable Web Sockets
    // attach the Text Control WebSocketHandler middleware

Adding TX Text Control Angular

  1. Select Command Line -> Developer Command Prompt from the Tools main menu. A command line is opened in the application's root folder. Switch to the ClientApp folder by typing the following command:

    cd dotnetcoreangular\ClientApp
  2. Install the TX Text Control document editor package by typing in the following command:

    ng add @txtextcontrol/tx-ng-document-editor
  3. Close the command line prompt after the packages are installed.

  4. In Visual Studio, find the file ClientApp -> src -> app -> home -> home.component.html and replace the complete content with the following:

    <tx-document-editor width="1000px"

    Replace the port number (32760) with the port number of your application. To find that port number, start the application and check the browser location bar.

Start the application by pressing F5. If you see an error, make sure that you replaced the port number in step 13.