# Angular and Node.js Technology Preview Released > Text Control released a technology preview of the Angular document editor and its Node.js backend. The setup uses npm packages instead of .NET hosting, with a WebSocket server handling document synchronization between the Angular client component and the Node.js processing service. > **Note:** This article is outdated and may no longer be accurate. - **Author:** Bjoern Meyer - **Published:** 2019-09-17 - **Modified:** 2026-07-17 - **Description:** Text Control released a technology preview of the Angular document editor and its Node.js backend. The setup uses npm packages instead of .NET hosting, with a WebSocket server handling document synchronization between the Angular client component and the Node.js processing service. - **4 min read** (730 words) - **Tags:** - Angular - Node.js - NPM - Visual Studio Code - **Web URL:** https://www.textcontrol.com/blog/2019/09/17/angular-and-nodejs-technology-preview-released/ - **LLMs URL:** https://www.textcontrol.com/blog/2019/09/17/angular-and-nodejs-technology-preview-released/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2019/09/17/angular-and-nodejs-technology-preview-released/llms-full.txt --- We released the final version of TX Text Control for Angular. Please learn more about this version here: [TX Text Control for Angular Released](https://www.textcontrol.com/blog/2020/01/07/tx-text-control-for-angular-released/llms-full.txt) --- We published the Technology Preview version of our Node.js and Angular implementations that enables developers to use the TX Text Control HTML5-based document editor in pure Angular and Node.js applications. This implementation doesn't require ASP.NET, IIS or the IFRAME-enabled widget. We released 3 npm packages to [npmjs.com](https://www.npmjs.com/settings/txtextcontrol/packages): - [@txtextcontrol/tx-ng-document-editor](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-editor) The Angular component implementation for the HTML5-based document editor. - [@txtextcontrol/tx-websocket-server](https://www.npmjs.com/package/@txtextcontrol/tx-websocket-server) The Node.js WebSocket server required for the TX Text Control document editor. - [@txtextcontrol/tx-document-editor](https://www.npmjs.com/package/@txtextcontrol/tx-document-editor) The Node.js component implementation for the HTML5-based document editor. Technology Preview features are not completely supported, may not be complete, and are not suitable for deployment in production. However, we provide these features as a preview and the primary goal is to get your feedback on this implementation. We are publishing updates constantly and will inform you about changes of this implementation. A release candidate with a go-live license is planned in the next couple of weeks. ### Creating your First Angular Application This tutorial shows how to create your first Angular application using the TX Text Control document editor. #### Prerequisites 1. Install [Node.js®](https://nodejs.org/en/download/) and npm, if not done before. 2. Open a Command Prompt and install the [Angular CLI](https://github.com/angular/angular-cli) globally by typing in the following command: ``` npm install -g @angular/cli ``` This tutorial uses Visual Studio Code that can be [downloaded](https://code.visualstudio.com/) for free. #### Creating the WebSocket Server Project 1. Open a *Node.js command prompt*, create an empty folder called "websocket-server", navigate into and type in the following command to install [Express](https://www.npmjs.com/package/express), the minimalist web framework for node: ``` npm i express ``` 2. Now, install the WebSocket Server package of TX Text Control: ``` npm i @txtextcontrol/tx-websocket-server ``` 3. Open this folder in Visual Studio Code by typing in the following command: ``` code . ``` 4. In Visual Studio Code, create a new file named *app.js* in the project's root folder: ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2019/09/17/a/assets/code_1.webp "Creating the application") 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); ``` 5. Back in the command prompt, start the Node.js application by typing in the following command: ``` node app.js ``` #### Creating the Angular Project 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 ``` 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 the following code and save it: ``` ``` ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2019/09/17/a/assets/code_2.webp "Creating the application") 6. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` Your default browser is opened with your newly created Angular app: ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2019/09/17/a/assets/screenshot-app.webp "Creating the application") This tutorial uses a demo server backend for the required synchronization service that synchronizes the document in order to provide the WYSIWYG rendering - a unique feature of TX Text Control to edit documents pixel-perfect across devices and browsers. If you want to deploy your project, you will have to host your own synchronization service and change the *serviceAddress* in the WebSocket Server Project (step 4). Let us know what you think about this technology preview and report issues you are having. We are more than happy to assist you. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Using TX Text Control with Node.js](https://www.textcontrol.com/blog/2019/09/18/using-tx-text-control-with-node-js/llms.txt) - [Creating an Angular Document Editor Application with a Node.js WebSocket Server](https://www.textcontrol.com/blog/2023/08/24/creating-an-angular-document-editor-application-with-a-nodejs-websocket-server/llms.txt) - [Client-Side Packages for X19 Available](https://www.textcontrol.com/blog/2020/12/09/client-side-packages-for-x19-available/llms.txt) - [Creating a WebSocket Server Project with Node.js](https://www.textcontrol.com/blog/2020/01/01/creating-a-websocket-server-project-with-nodejs/llms.txt) - [Angular: Loading and Saving Local Documents](https://www.textcontrol.com/blog/2019/12/06/angular-loading-and-saving-local-documents/llms.txt) - [Text Control Roadmap 2019: High DPI Support, Forms, Node.js and Angular](https://www.textcontrol.com/blog/2019/03/12/text-control-roadmap-2019/llms.txt)