### Challenges and solutions in building large Angular apps

In large Angular applications, developers face several significant challenges. One major issue is managing complexity. These apps have lots of components, services, and modules that all need to work together smoothly. Keeping everything organized and easy to understand can be tough, especially with a big team.

Another problem is build times. As the app grows, it can take longer and longer for changes to show up during development. This can slow down the development process and make it harder to stay productive.

Dependency management is another headache. This involves making sure all the different parts of the app work well together and play nicely with outside libraries. 

### Tool limitations

Even experienced teams can struggle with managing large Angular applications without using the right tools. Organizing numerous components, services, and modules becomes challenging without tools that aid in clarity and team collaboration. Utilizing appropriate tools is key for experienced teams to successfully navigate the complexities of large Angular projects.

### Fixing problems with NX

NX offers several benefits for managing large Angular applications. It helps reduce the time it takes to build projects and keeps code well-organized by managing dependencies and structuring code into reusable parts. This makes it easier to maintain and expand applications over time.

One of NX's strengths is its ability to speed up builds. It does this by remembering previous build results and doing multiple tasks at the same time. This saves developers time and lets them make changes quickly.

NX also comes with tools for testing and checking code quality. It works well with common testing tools and helps keep code clean and consistent. This catches mistakes early and ensures code stays high-quality.

Furthermore, NX makes it easy to work together on projects. It keeps all code and shared parts in one place, making it simpler to share code between different projects or teams. This improves teamwork, reduces problems with combining code, and makes development smoother overall.

Manage Large Angular Apps and Supercharge Development Workflows

Learn how to create and maintain Angular applications using NX. 
Designed for Angular developers, this course covers best practices, improving workflow, and migrating existing applications to NX. 
Discover how to configure tools like Cypress for end-to-end testing and Storybook for UI component development. 
By the end of this course, you will have the knowledge and experience to work comfortably with NX on a daily basis.

Next-Level Angular Apps with NX

---
title: Extracting shared DTO library
description: How to extract library with DTOs classes from backend app and prepare it to be shared with frontend application
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.04-dto-library?ref_type=heads
privateVideoUrl: https://stream.mux.com/2Z2WaaNi9TAe2dBfSPOX8ZdJW2YyEdIJ1MD9G1EyaD00.m3u8
---

It wouldn't be nice to extract DTO classes from the backend to a separate library and then use it in the frontend...?

That's what we're going to do in this lesson. The main reason and advantage of this action is to have the
strict "contract" used in communication between the backend and frontend. In this case, if someone decides to change the class
because it's necessary for the backend, you'll instantly make the exact change in the front end. If the change is breaking, the CI or
build command will notify you where it's breaking. Of course, it's possible when you're using Typescript.

Extracting a new library, in this case, is fairly simple. The first thing we need to do is to create a new Typescript
library. We covered this in previous lessons, so follow the commands below.

```bash
yarn nx g @nx/js:lib libs/shared/dtos --buildable --publishable --importPath "shared/dtos"
```

As a result, you should find a new library inside of the `libs/` directory. We don't need the `src/lib/dtos.ts` file, so I'm
removing it, and it's imported in `src/index.ts`.

![Folder structure after running nx generate command](https://d2uusema5elisf.cloudfront.net/courses/next-level-angular-apps-with-nx/module_05/lesson_05.04/public/images/04-04-01.png)

Because we have two kinds of DTOs, inside of the `src/lib/` of my library, I'm creating two directories, `rooms` and `meetings`. This is a small library, and this step may be pointless, but I believe that even in small apps, you should keep everything organized. Not because it's useful but because you train your skills as a programmer.

How to extract library with DTOs classes from backend app and prepare it to be shared with frontend application