Node.js

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

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

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 Type in the following command to install Express , the minimalist web framework for node:

npm install express 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); Back in the command prompt, start the Node.js application by typing in the following command:

node main.js

Creating the Angular Application

Prerequisites

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

npm install -g @angular/cli

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.

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

cd my-editor-app 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:

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.

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

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

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

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.

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

ng serve --open

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

Node.js

Post tagged with Node.js in 2023

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Node.js

Post tagged with Node.js in 2023 ​

August 2023

Post tagged with Node.js in 2023