By the end of this chapter, we will create an Nx monorepo with an Angular application and library in it. To follow along, you’ll need to install some tools. Note that we will only use freely available tools.

You will require the following:

• Visual Studio Code (VS Code) as your integrated development environment (IDE)
• Chrome web browser
• Angular 17.1 or higher
• NodeJS version v20.11.0 or higher
• TypeScript version 5.3.3 or higher
• Nx version v18.0.7 or higher

Throughout this book, we will use Angular 17.1, NodeJS 20.11.0, TypeScript 5.3.3, and Nx 18.0.7.

The GitHub repository for this book is available at https://github.com/PacktPublishing/Effective-Angular.

Modern web applications are constantly getting bigger and more complex. Because of this, developing scalable front-end applications is more critical than ever. To create scalable front-end applications, we need to understand what scalability means in the context of a front-end application.

What is scalability?

The first thing that might come to mind when you hear the term scalability is handling more traffic. However, in the context of front-end applications, when talking about scalability, we mostly mean the scalability of the code base. Or, more concisely, the code is easy to extend, and modules or micro front-ends can be added to the software without much work. Components and libraries are reusable; the code is easy to maintain, test, and debug, even when the application grows. You can work with different teams on separate parts of the application, and onboarding new teams that write similar code is easy to achieve and enforce...

When it comes to architecting software, it’s essential to think of what you are building, what it can grow into, what the context is, and who will work on it. Depending on these parameters, you’ll want to create an architecture that’s flexible enough to grow and adapt without overengineering it, making things more complex and time-consuming than needed.

For example, if you’re building a simple website for a small family-owned business, you don’t need elaborate architecture and complex design patterns; this will make things more complex and time-consuming than they need to be. The needs for the website will probably stay mostly the same, and the code base will remain small and manageable. But when you’re building enterprise software comprised of multiple applications, the needs and utility of those applications will change quite a bit, and you’ll want to ensure that the software...

In this section, you will learn what Nx is and why it’s such a fantastic tool for developing Angular applications at scale. Nx is rapidly becoming the go-to tool for developing large monorepo front-end applications. So, what exactly is Nx and why should you use it?

Nx is a tool that helps you to speed up, streamline, and standardize your development, testing, build, and deployment process. The Nx tooling offers various features and integrations you can utilize during every stage of development. Nx was created so that you can adopt it incrementally by picking and choosing what you want to use or add to your current environment. At its core, Nx helps you with the following:

• Speeding up the build and test times of your applications.
• Managing dependencies and running tasks within monorepo projects.
• Swiftly scaffolding new code snippets, applications, and libraries without needing to worry about configuring build tools.
...

In this final section, we will create an Nx monorepo, along with some placeholder Angular applications and libraries for demonstration purposes. We’ll start by adding some extensions in VS Code to make our developer experience more pleasant.

Add the following extensions:

• Angular Essentials (version 16): Angular Essentials is comprised of eight different extensions that are useful for Angular development
• Angular support
• Nx console

Once you’ve installed these extensions, you will probably need to reload VS Code for all of them to be applied, so restart your VS Code application. After this, you should see an Nx icon on the left-hand side of VS Code; this is the Nx console. When you have successfully installed the various VS Code extensions, you must globally install the Nx and Cypress NPM packages. To do so, you can run the following command in the terminal of your choice. I like to use the integrated VS Code...

In this chapter, you created an Nx monorepo with some placeholder projects and are now ready to scale to hundreds of applications. You learned how to structure your Angular applications and libraries within the monorepo, and now know how to utilize the essential features of Nx.

In the next chapter, we will explore some of the newest and most powerful features in the Angular framework.