Angular

TX Text Control .NET Server provides two Angular packages: one for the Document Editor and one for the Document Viewer. Check which Angular versions they support, add them to an application with a root module or with standalone components and handle @angular/cdk and peer dependency conflicts. Complete tutorials are Getting Started: Document Editor with Angular and Getting Started: Document Viewer with Angular.

Packages and Supported Angular Versions

In other words:

• The Document Editor package supports Angular 18.2.14 up to Angular 21.
• The Document Viewer package supports Angular 15.1.3 up to Angular 21.
• An application that uses both packages needs an Angular version from 18.2.14 up to 21.

The version history in the README of @txtextcontrol/tx-ng-document-editor lists Angular 18 to 20 for version 34.0.0. The peer dependencies published with the package include Angular 21.

Each package also depends on tslib: the editor on ^2.8.1, the viewer on ^2.5.0. Both components need a backend that runs TX Text Control .NET Server; see Document Editor and Document Viewer.

Earlier Package Versions

The Angular range changes between package versions. Check it before you update Angular or the packages:

Prerequisites

• Node.js and npm.
• The Angular CLI in a version that creates applications inside the supported range. The Getting Started tutorials were written with Angular CLI 19. To install it globally, run:

npm install -g @angular/cli@19

Without a version, npm installs the latest Angular CLI, which creates applications with an Angular version that the packages do not declare.

Install the Packages

Run the following steps in the folder of your Angular application:

1. Check the Angular version of your application: it is the version of @angular/core in package.json. If it is outside the range of the package you install, read "Peer Dependency Conflicts" below first.

2. If package.json doesn't contain @angular/cdk yet, install it with the same major version as Angular, for example for Angular 19:

   npm i @angular/cdk@19
   

   The section "The @angular/cdk Package" below explains why this step matters.

3. Install the package you need:

   npm i @txtextcontrol/tx-ng-document-editor
   npm i @txtextcontrol/tx-ng-document-viewer
   

Then make the module available to your components, as described in the next two sections. Which section applies depends on how your application was created:

• Since Angular 17, the Angular CLI creates standalone applications by default.
• ng new with the --no-standalone option creates an application with a root module (app.module.ts). The current Text Control tutorials use this option.

Install With ng add

Both packages support ng add. The command installs the package and adds its module to the root module of your application:

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

Use ng add only in applications with a root module. According to the package README, a standalone application created without --no-standalone shows the error Bootstrap call not found when you run ng add. For standalone applications, install the package with npm i and import the module yourself.

Set Up an Application With a Root Module

1. Create the application with a root module:

   ng new my-editor-app --no-standalone
   

2. Change to the new folder, check the Angular version in package.json, and install @angular/cdk and the package as shown above.

3. Open src/app/app.module.ts and add the module to the imports array. This example imports both modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
import { DocumentViewerModule } from '@txtextcontrol/tx-ng-document-viewer';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DocumentEditorModule,
    DocumentViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you use only one of the components, import only its module.

Set Up a Standalone Application

In a standalone application, add the module to the imports of the component that shows the editor or the viewer, for example src/app/app.component.ts. If your Angular CLI version generates different file names, use the file of that component.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DocumentEditorModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-editor-app';
}

For the viewer, import DocumentViewerModule from @txtextcontrol/tx-ng-document-viewer the same way.

Add the Components to a Template

After the module is imported, the components are available in the template. The Document Editor requires width, height and webSocketURL:

<tx-document-editor
  width="1000px"
  height="500px"
  webSocketURL="wss://localhost:7118/api/TXWebSocket">
</tx-document-editor>

The Document Viewer requires width, height and basePath:

<tx-document-viewer
  width="800px"
  height="800px"
  basePath="https://localhost:7275">
</tx-document-viewer>

Replace the ports with the ports of your backend. Bind boolean and array values with square brackets, for example [toolbarDocked]="true". The Getting Started tutorials list more attributes.

The @angular/cdk Package

Both packages require @angular/cdk, but they declare it differently:

• Document Editor: @angular/cdk is a regular dependency with the range >=18.2.14 <=21.*.*.
• Document Viewer: @angular/cdk is a peer dependency with the range >=15.1.4 <=21.*.*.

If your application doesn't contain @angular/cdk, npm chooses the newest version these ranges allow, which is version 21. @angular/cdk 21 in turn declares Angular 21 or 22 as its peer dependency. In an application with an older Angular version, for example Angular 19, this has two effects:

• Installing the Document Viewer package fails with an ERESOLVE error, although your Angular version is inside the viewer's range.
• Installing the Document Editor package succeeds with ERESOLVE overriding peer dependency warnings, and npm places a separate copy of @angular/cdk 21 inside the folder of the editor package.

Both effects disappear when package.json already contains @angular/cdk with the major version of your Angular version. npm then uses that version for both packages. Install it before the TX Text Control packages, as shown in "Install the Packages" above. If your package-lock.json file already contains the separate copy, npm keeps it when you add @angular/cdk later. In that case, uninstall the TX Text Control package with npm uninstall, install @angular/cdk, and install the TX Text Control package again.

Peer Dependency Conflicts

If your application uses an Angular version outside the declared range, for example Angular 22, npm stops the installation:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

The error message names the range that could not be satisfied, for example peer @angular/common@">=18.2.14 <=21.*.*" from @txtextcontrol/tx-ng-document-editor@34.0.0.

You have two options.

Use a Supported Angular Version

Use an Angular version inside the range of the packages you install. This is the only combination the packages declare. For an application with both components, that is Angular 18.2.14 up to Angular 21.

Install While Ignoring Peer Dependencies

Text Control keeps the peer dependencies of its Angular packages deliberately older than the newest Angular release. According to Text Control, the packages don't use newer Angular features and can be installed ignoring the peer dependencies. The Text Control tutorial Getting Started: Document Viewer with Angular CLI v18.0 installs the package this way:

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

The option works the same way for the Document Editor package. Keep the following npm behavior in mind:

• --legacy-peer-deps makes npm ignore all peer dependencies for this installation. npm neither checks them nor installs missing ones, so install @angular/cdk yourself for the Document Viewer.
• The option applies only to the command you run. A later npm install or npm ci without the option fails with the same error. To use the option for every installation in the project, including builds on a CI server, add the line legacy-peer-deps=true to a file named .npmrc in the project folder.
• The Document Editor package declares @angular/cdk as a regular dependency up to version 21. If your application uses a newer @angular/cdk, npm installs a separate copy of @angular/cdk 21 inside the folder of the Document Editor package.
• npm doesn't check whether the combination works. The statements by Text Control were made for the Angular versions that were current at the time. Test your application with the Angular version you use.

Next Steps

• Getting Started: Document Editor with Angular — build an Angular application with the Document Editor step by step.
• Getting Started: Document Viewer with Angular — build an Angular application with the Document Viewer step by step.
• Angular Integration Guide — go further with the Angular components in your application.
• Updating npm Packages — move the packages to a new version.