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:
-
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