### 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: Adding new Angular apps to existing monorepo
description: Add new Angular apps to the existing NX repository
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.06-libraries?ref_type=heads
privateVideoUrl: https://stream.mux.com/5n9fVANyqY4SBqIc8lPNPJvx411oKkxzCKdFUrDvbSc.m3u8
---

According to the plan and design, we need three applications:

-   `backend` in NestJS - we got it
-   `admin-frontend` in Angular - application, which will allow us to add a new room and assign meetings to it
-   `room-frontend` in Angular - the application which will display the room's timetable

Our frontend applications have a few common components like buttons, lists, inputs, etc. It would be nice to share these components between apps.

In this lesson, we'll generate the applications and libraries we need. The plan for that is to make the folder structure look like this:

```text
- apps
    - backend // done
    - admin-frontend
    - room-frontend
- libs
    - dtos // done
    - components
        - button
        - list
        - card
        - room-list
        - room-background
```

I'm going to create them in advance. In real life, you may make them when solving a problem you currently have. For this course, it's better to have them created and focus on more important aspects.

## Apps

We want to have CSS as a styling solution and routing enabled for all applications.

```bash
yarn add -D @nx/angular
yarn nx g @nx/angular:app apps/admin-frontend --prefix admin
yarn nx g @nx/angular:app apps/room-frontend --prefix room
```

## Libs

```bash
yarn nx g @nx/angular:lib libs/shared/components/button --prefix shared --buildable --publishable --importPath "shared/components/button"
yarn nx g @nx/angular:lib libs/shared/components/list --prefix shared --buildable --publishable --importPath "shared/components/list"
yarn nx g @nx/angular:lib libs/shared/components/card --prefix shared --buildable --publishable --importPath "shared/components/card"
yarn nx g @nx/angular:lib libs/shared/components/room-list --prefix shared --buildable --publishable --importPath "shared/components/room-list"
yarn nx g @nx/angular:lib libs/shared/components/room-background --prefix shared --buildable --publishable --importPath "shared/components/room-background"
```

## Styles

For the purpose of this course, I'm providing you with the full CSS code needed to build every component in the next few lessons. Please copy the code below to `src/styles.css` in both frontend applications.

```css
/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --button: #38bdf8;
    --button-hover: #0ea5e9;
    --primary: #38bdf8;
    --red: #ef4444;
    --disabled: #d4d4d4;
    --shadow: #bae6fd;
    --border: #e5e5e5;
    --border-width-sm: 1px;
    --border-width: 2px;
    --border-width-lg: 4px;
    --radius: 5px;
    --size-1: 5px;
    --size-2: 10px;
    --size-3: 15px;
    --font-small: 12px;
    --font-regular: 14px;
}

Add new Angular apps to the existing NX repository