For compatibility reasons, the peer dependencies of the TX Text Control Angular packages are older, but they are backward and forward compatible. The reason is simple: Our packages don't use newer features, and we don't want to force users to update their version of Angular just because of our libraries.

This tutorial will show you how to install and use the package if you encounter an error like the one below.

ERESOLVE unable to resolve dependency tree

As an alternative to updating your version of Angular, you can force Angular to use the legacy dependencies. You can use the following tutorial to install the Text Control libraries in more recent versions.

This tutorial uses Visual Studio Code that can be downloaded for free.

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-tx-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-tx-app

3. Install the TX Text Control Document Editor package by typing in the following command:

   npm i @txtextcontrol/tx-ng-document-editor --legacy-peer-deps

   To install the TX Text Control Document Viewer package, use the following command:

   npm i @txtextcontrol/tx-ng-document-viewer --legacy-peer-deps

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.module.ts, add replace the complete content with the following code and save it:

   Document Editor

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       DocumentEditorModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

   Document Viewer

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { DocumentViewerModule } from '@txtextcontrol/tx-ng-document-viewer';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       DocumentViewerModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

6. In Visual Studio Code, open the file src -> app -> app.component.html, add replace the complete content with the following code, replace yourtoken with your given Trial Access Token and save it:

   Document Editor

   <tx-document-editor
     width="1000px"
     height="500px"
     webSocketURL="wss://backend.textcontrol.com/TXWebSocket?access-token=yourtoken">
   </tx-document-editor>

   Backend Server

   In the code above, a hosted demo backend server is used specified through the webSocketURL property. If you are hosting your own required backend server, replace the URL with your backend endpoint such as ws://localhost:8080/TXWebSocket.

   Document Viewer

   <tx-document-viewer
           width = "800px"
           height = "800px"
           basePath = "https://backend.textcontrol.com?access-token=yourtoken"
           documentData = "PGh0bWw+PGJvZHk+PHA+VGVzdDwvcD48L2JvZHk+PC9odG1sPg==" 
           dock = "Window"
           [toolbarDocked] = "true"
           documentPath = "test.docx"
           [isSelectionActivated] = "true"
           [showThumbnailPane] = "true">
           </tx-document-viewer>

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

   ng serve --open