# Document Editor and Viewer with Newer Versions of Angular CLI > For compatibility reasons, the peer dependencies of the TX Text Control Angular packages are older, but they are backward and forward compatible. This tutorial shows how to use TX Text Control packages with newer versions of Angular. - **Author:** Bjoern Meyer - **Published:** 2023-08-18 - **Modified:** 2026-07-17 - **Description:** For compatibility reasons, the peer dependencies of the TX Text Control Angular packages are older, but they are backward and forward compatible. This tutorial shows how to use TX Text Control packages with newer versions of Angular. - **3 min read** (460 words) - **Tags:** - Angular - Compatibility - **Web URL:** https://www.textcontrol.com/blog/2023/08/18/document-editor-and-viewer-with-newer-versions-of-angular-cli/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/08/18/document-editor-and-viewer-with-newer-versions-of-angular-cli/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/08/18/document-editor-and-viewer-with-newer-versions-of-angular-cli/llms-full.txt --- 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](https://code.visualstudio.com/) 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](https://www.textcontrol.com/product/client-package/token/) and save it: **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** ``` ``` 7. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` --- ## 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 - [Reuse Persistent Document Editor Components in Angular SPA Applications](https://www.textcontrol.com/blog/2025/04/03/reuse-persistent-document-editor-components-in-angular-spa-applications/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt) - [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt) - [Changing the Language in the Angular Document Editor Using the Resource Kit](https://www.textcontrol.com/blog/2025/03/05/changing-the-language-in-the-angular-document-editor-using-the-resource-kit/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [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/llms.txt) - [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt) - [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt) - [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt) - [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt) - [Customizing the Ribbon in TX Text Control for Angular](https://www.textcontrol.com/blog/2024/09/11/customizing-the-ribbon-in-tx-text-control-for-angular/llms.txt) - [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/llms.txt) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-angular/llms.txt) - [Getting Started Video Tutorial: How to use the Document Editor in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-angular/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Mail Merge: The Pre-Shaped Data Concept Explained](https://www.textcontrol.com/blog/2024/05/30/mail-merge-the-pre-shaped-data-concept-explained/llms.txt) - [Meet Text Control at NDC Oslo 2024](https://www.textcontrol.com/blog/2024/05/28/meet-text-control-at-ndc-oslo-2024/llms.txt) - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Comments JavaScript API: Useful Tips and Tricks](https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt) - [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/llms.txt)