The npm package for using the document editor in Angular applications can be used with an ASP.NET (Core) backend or a Node.js server to handle the WebSocket requests. This tutorial will show you how to create an Angular application that uses a Node.js backend server to handle the requests.

Creating the Node.js Project

Prerequisites

  1. Install Node.js® and npm, if not done before.

  1. Open a Node.js command prompt, create an empty folder called "node-websocket-server", navigate into and type in the following command to install the document editor:

    npm install @txtextcontrol/tx-websocket-server

  2. Type in the following command to install Express, the minimalist web framework for node:

    npm install express

  3. Create a new file named main.js in the project's root folder, copy the following code into this JavaScript file and save it:

    const { WebSocketServer } = require('@txtextcontrol/tx-websocket-server');
    const express = require('express');
    const app = express();
    const server = app.listen(8080);
    var wsServer = new WebSocketServer(server);
    view raw main.js hosted with ❤ by GitHub

  4. Back in the command prompt, start the Node.js application by typing in the following command:

    node main.js

Creating the Angular Application

Prerequisites

  1. Open a Command Prompt and install the Angular CLI globally by typing in the following command:

    npm install -g @angular/cli

  1. Open a Command Prompt and create a new project and default app by typing in the following command:

    ng new my-editor-app

    Follow the questions in the command prompt by answering them with "y" to add Angular routing and Enter to confirm CSS as your preferred stylesheet format.

  2. Change into the created folder by typing in the following command:

    cd my-editor-app

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

    ng add @txtextcontrol/tx-ng-document-editor

    Supported Angular Versions

    Are you getting an error similar to this?

    ERESOLVE unable to resolve dependency tree

    You have two options here:

    1. Please check the supported Angular versions of tx-ng-document-editor and downgrade Angular and the global Angular CLI version to a version that will satisfy the requirement.

    2. Force the installation of the package. Read more about that here:
      Document Editor and Viewer with Newer Versions of Angular CLI

  4. Open this folder in Visual Studio Code by typing in the following command:

    code .

  5. In Visual Studio Code, open the file src -> app -> app.component.html, add replace the complete content with the following code and save it:

    <tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="ws://localhost:8080/TXWebSocket">
    </tx-document-editor>
    view raw test.html hosted with ❤ by GitHub

    Backend Server

    In the code above, we are using the Node.js backend that we created in the first step. If you have been using a different port and endpoint path, you should replace them.

  6. Back in the command prompt, start the Angular application by typing in the following command:

    ng serve --open