Article

Category: Expert stories

Nx for Angular: A reliable tool simplifying the work with IT projects

In this article, emagineer & front-end developer Kamil Naja explores how Nx can benefit Angular projects, as well as its compatibility with other technologies like React and Node. Let's take a closer look at why Nx is a valuable tool to consider.

Kamil Naja, Warsaw

Nx is a tool that simplifies the process of building monorepo projects. In this article, I will focus on its main applications in projects using Angular. This tool also allows for collaboration with various other technologies such as React or Node. Here's why you should pay attention to Nx!

 

Task: Application Configuration

The default configuration of Angular, which we get when generating a project using Angular CLI, is often customized to suit our needs. For example, changing from Karma to Jest or switching the linter to ESLint.

When dealing with just one project, this is a straightforward process. However, when managing several projects, it becomes time-consuming. Any changes to settings in one project must be reflected in all the others.

More from this author:
Snapshot testing in front-end applications

Artboard 8

By organizing the code in a monorepo (using Nx), you can create a single configuration and share it among multiple projects. New projects added to the workspace will automatically use the existing configuration.

When creating components, you can also choose the option to generate end-to-end tests using Cypress. Jest is used as the default test runner in Angular applications.

In my opinion, it's easier to start an Angular project with Nx than with Angular CLI because it helps avoid these tedious and often challenging configuration changes. The default settings include configured Prettier, ESLint, and Jest, which seems sufficient. The tool also simplifies integration with Storybook.

Once you already have an existing Nx workspace, you can easily add additional applications and libraries to it. Nx also makes it straightforward to migrate projects that were previously managed separately into a monorepo.

 

Task: Application Breakdown

The primary tool for working with Angular is Angular CLI. It is mainly used for generating various components of an application.

Nx (with the @nx/angular plugin) makes it even easier to generate components, services, and various types of libraries. Nx allows you to build libraries, including those you want to publish through npm, which I'll describe in the next paragraph. You could say that the tools provided by Nx elevate the creation of elements to a higher level.

 

  Angular CLI is essential, but Nx (@nx/angular) takes it further. Effortlessly generate components, services, and libraries, elevating your development process.

 

The Nx console is quite extensive, and for complex commands, it's worthwhile to use the Nx Console IDE plugin for support.

Nx works in collaboration with ESLint, allowing you to introduce restrictions on importing various types of elements among themselves (dependency boundaries), making it easier to maintain a consistent project architecture. For instance, in an application utilizing NgRx, you can enforce that components never directly connect with services.

Additionally, Nx saves you from the need to write repetitive boilerplate code. It's an adaptable tool with several online plugins available, enhancing its functionality.

 

Task: Code Sharing

Nx makes it easy to share code among multiple applications. It enables the generation of various types of libraries, such as:

  • Feature library - a library containing UI elements that can access data to solve specific business problems.
  • UI library - a library with presentational components.
  • Data-access library - a library providing data access, often fetched from the backend.
  • Utility library - a library containing methods used in various parts of the application.

The naming of these library types is important, as it allows you to organize code into clearly defined layers, and you know which types of libraries can interact with each other.

laptop

From my perspective, working in this way seems simpler than the standard approach, which involves creating a library as a separate project, making changes to it, changing its version, and then installing it in an Angular application using npm. Code sharing reduces the amount of work and helps avoid duplication.

 

Task: Shortening Production Time

One of the challenges when working with Angular is the lengthy build times and execution of unit tests. The application is rebuilt from scratch every time, even when nothing has changed.

Nx helps reduce these calculations because the codebase is divided into independent modules. If you build code that has been rebuilt previously and hasn't changed, you'll get near-instant results from the cache. The commands that can be cached include build, lint, test, and e2e.

Nx allows for parallel computation and cloud-based cache sharing. In my opinion, this is Nx's most significant advantage because daily work involves executing commands repeatedly. Faster build times greatly improve the developer experience.

 

  Nx allows for parallel computation and cloud-based cache sharing, which is its most significant advantage.

 

Task: Application Structure Visualization

The nx:graph command shows how individual elements of the application are connected, making it easier to visualize the architecture. You can also use the nx affected:graph command to see how the application changes after adding your modifications.

Summary

Nx is useful for anyone interested in building complex applications, especially when it comes to code sharing. It can speed up certain tasks, help start new projects without tedious configuration, and simplify the creation of individual application elements. The only potentially confusing aspect for a beginner is the fact that there are numerous options available when working with Nx.

Nevertheless, Nx comes highly recommended by many experts. Its implementation is straightforward, and with extensions, you can tailor it even better to your specific needs.

Read also:
Effective ways to work with Backend

Ready to grow?

Get help with your CV and profile and be found for rewarding projects.

Register your profile

Blog

Read more

See insights

left-arrow
right-arrow

Man and woman speaking on their way through the office.
Expertise strategy
Managed Teams & Managed Service

From partner to problem: 5 red flags in your supplier setup

IT outsourcing once felt like a game-changing lifeline: efficient, cost effective and freeing up focus. But how do you know when it’s time to pull back? These 5 red flags could signal that your supplier setup might be holding you back.
Two young professionals sitting in a meeting.
Expertise strategy
Tech & Development

IT leaders are reclaiming control – here’s why

The IT landscape is shifting fast. As old outsourcing models show their cracks, forward-thinking leaders are rebuilding internal strength and redefining what smart partnerships look like. A trend is emerging where decoupling and taking back ownership takes the stage.
Bestshoring
Expertise strategy

Offshoring Part 2: What offshoring means to emagine

In this article, Martin Hartley, Group CCO at emagine, explores how we approach offshoring – not just as a cost-saving measure, but as a strategic extension of our delivery model.