Nx is a powerful tool for managing monorepos, making it easier to develop and scale applications and libraries within a single repository. With Nx, you can create, maintain, and test multiple Angular applications and libraries efficiently. This blog will walk you through setting up an Nx workspace with Angular from scratch, using a series of commands to get you up and running quickly.

Prerequisites

Before starting, ensure you have:

• Node.js and npm installed

• Basic knowledge of Angular and frontend development concepts

1. Install Nx CLI

First, you need to install the Nx CLI globally. This will help you create and manage your Nx workspace.

npm install -g nx

2. Create a New Nx Workspace

Use the Nx CLI to create a new workspace. You'll be prompted to choose a preset during setup. For an Angular project, select the Angular preset.

npx create-nx-workspace@latest my-workspace

Here’s what to do:

• my-workspace: Replace this with your desired workspace name.

• During setup, you’ll be asked to choose a preset. Select "Angular" from the options.

This command will create a new directory named my-workspace, set up an Nx workspace with Angular, and install the necessary dependencies.

3. Navigate to Your Workspace

Change into the directory of your newly created workspace:

cd my-workspace

4. Explore the Workspace Structure

Your Nx workspace will have the following structure:

• apps/: Contains your Angular applications.

• libs/: Contains shared libraries that can be used across multiple applications.

• nx.json: Configuration file for Nx.

• angular.json: Configuration file for Angular CLI, managing Angular-specific build and serve configurations.

• tsconfig.base.json: Base TypeScript configuration file that provides a common set of settings for all projects within the workspace.

• package.json: Lists project dependencies and scripts.

5. Generate a New Angular Application

If you want to add more Angular applications to your workspace, you can generate them using the Nx CLI:

nx generate @nrwl/angular:application my-app

Replace my-app with your desired application name. This command will create a new Angular application within the apps/ directory.

6. Serve the Angular Application

To run the Angular application locally, use the following command:

nx serve my-app

This starts the development server and serves the application at http://localhost:4200 by default.

7. Generate a New Angular Library

Creating libraries helps you share code across different applications. To generate a new Angular library:

nx generate @nrwl/angular:library my-lib

Replace my-lib with the name of your library. The library will be created in the libs/ directory.

8. Build the Angular Application

To build your Angular application for production, use:

nx build my-app

This command compiles the application and outputs the build artifacts into the dist/ directory.

9. Test the Angular Application

To run unit tests for your Angular application:

nx test my-app

For end-to-end tests:

nx e2e my-app-e2e

10 .Optinally you can explore Additional Nx Features

• Nx Console: A graphical interface for Nx commands integrated with Visual Studio Code. Install from the VS Code marketplace for an improved development experience.

• Nx Cloud: Provides distributed caching and computation for faster builds and tests. Visit the Nx Cloud website for more details.

Conclusion

Setting up an Nx workspace with Angular is a straightforward process that involves creating a new workspace, generating Angular applications and libraries, and using various Nx commands to manage and maintain your project. Nx simplifies the development of large-scale applications by providing powerful tools for managing monorepos.