# Angular

> Install the Angular Document Editor and Viewer packages for Angular 18 to 21: ng add, root module or standalone setup, @angular/cdk and ERESOLVE conflicts.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Installation Guide > npm Packages > Angular
- **3053 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt

---

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](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt) and [Getting Started: Document Viewer with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms-full.txt).

### Packages and Supported Angular Versions

| Package and version | Module and component | `@angular/core` and `@angular/common` | `@angular/cdk` |
|---|---|---|---|
| `@txtextcontrol/tx-ng-document-editor` 34.0.0 | `DocumentEditorModule`, `tx-document-editor` | `>=18.2.14 <=21.*.*` (peer dependency) | `>=18.2.14 <=21.*.*` (dependency) |
| `@txtextcontrol/tx-ng-document-viewer` 34.0.1 | `DocumentViewerModule`, `tx-document-viewer` | `>=15.1.3 <=21.*.*` (peer dependency) | `>=15.1.4 <=21.*.*` (peer dependency) |

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](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-editor/llms-full.txt) and [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-viewer/llms-full.txt).

#### Earlier Package Versions

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

| Package version | TX Text Control version | Angular range (`@angular/core`) |
|---|---|---|
| `@txtextcontrol/tx-ng-document-editor` 32.4.2 (last 32.x version) | 32.0 | `>=15.2.2 <=17.*.*` |
| `@txtextcontrol/tx-ng-document-editor` 33.0.0 | 33.0 | `>=17.3.12 <=19.*.*` |
| `@txtextcontrol/tx-ng-document-editor` 34.0.0 | 34.0 | `>=18.2.14 <=21.*.*` |
| `@txtextcontrol/tx-ng-document-viewer` 32.4.0 (last 32.x version) | 32.0 | `>=15.2.2 <=17.*.*` |
| `@txtextcontrol/tx-ng-document-viewer` 33.0.0 to 33.0.2 | 33.0 | `>=15.1.3 <=19.*.*` |
| `@txtextcontrol/tx-ng-document-viewer` 34.0.0 | 34.0 | `>=15.1.3 <=19.*.*` |
| `@txtextcontrol/tx-ng-document-viewer` 34.0.1 | 34.0 | `>=15.1.3 <=21.*.*` |

### Prerequisites

- [Node.js](https://nodejs.org/en/download/) 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:

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

    ```bash
    npm i @angular/cdk@19
    ```

    The section "The @angular/cdk Package" below explains why this step matters.
3. Install the package you need:

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

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

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

```typescript
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.

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

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

The Document Viewer requires `width`, `height` and `basePath`:

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

```text
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](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/) installs the package this way:

```bash
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](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt) — build an Angular application with the Document Editor step by step.
- [Getting Started: Document Viewer with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms-full.txt) — build an Angular application with the Document Viewer step by step.
- [Angular Integration Guide](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/angular/llms-full.txt) — go further with the Angular components in your application.
- [Updating npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/upgrading/npm/llms-full.txt) — move the packages to a new version.

---

## Nearby

- **Previous:** [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-viewer/llms-full.txt)
- **Next:** [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/llms-full.txt)