Backend interview prep

Start

Nx Monorepo in Angular

Learn Nx Monorepo architecture for Angular applications including workspace structure, generators, libraries, affected commands, caching, Module Federation, CI/CD, enterprise best practices, and interview questions.

Large enterprise applications often consist of multiple Angular applications, shared libraries, backend services, and utility packages.

Managing these projects in separate repositories becomes increasingly difficult as applications grow.

Nx is a powerful build system and monorepo tool that helps teams manage multiple applications and libraries within a single workspace.

Many large organizations use Nx for:

  • Enterprise Angular Applications
  • Microfrontends
  • Design Systems
  • Shared Libraries
  • Full Stack Applications
  • CI/CD Optimization

Table of Contents

  1. What is Nx?
  2. What is a Monorepo?
  3. Why Use Nx?
  4. Nx Workspace Architecture
  5. Creating an Nx Workspace
  6. Applications and Libraries
  7. Dependency Graph
  8. Affected Commands
  9. Computation Caching
  10. Module Federation with Nx
  11. CI/CD Integration
  12. Enterprise Banking Example
  13. Best Practices
  14. Common Mistakes
  15. Top 10 Interview Questions
  16. Interview Cheat Sheet
  17. Summary

What is Nx?

Nx is a smart build system that helps developers build, test, lint, and deploy multiple applications efficiently from a single repository.

Nx provides:

  • Code generators
  • Dependency graph
  • Smart caching
  • Incremental builds
  • Distributed task execution
  • Monorepo management
  • Module Federation support
  • CI/CD optimization

What is a Monorepo?

A Monorepo stores multiple applications and libraries inside one repository.

Example

Repository

├── Angular App

├── Admin Portal

├── Customer Portal

├── Shared UI Library

├── Shared Models

├── Shared Utilities

└── Backend APIs

Why Use Nx?

Benefits include:

  • Shared code
  • Better consistency
  • Faster builds
  • Incremental testing
  • Easier refactoring
  • Dependency visualization
  • Better developer productivity
  • Enterprise scalability

Nx Workspace Architecture

flowchart TD

Workspace

Workspace --> Applications

Workspace --> Libraries

Applications --> CustomerPortal

Applications --> AdminPortal

Applications --> MobilePortal

Libraries --> SharedUI

Libraries --> SharedModels

Libraries --> SharedUtilities

Typical Nx Workspace

workspace/

├── apps/

│   ├── customer-portal/

│   ├── admin-portal/

│   └── banking-dashboard/

├── libs/

│   ├── ui/

│   ├── auth/

│   ├── shared/

│   ├── models/

│   ├── api/

│   └── utils/

├── tools/

├── nx.json

├── package.json

└── tsconfig.base.json

Creating an Nx Workspace

Create workspace

npx create-nx-workspace@latest

Generate Angular application

nx g @nx/angular:app customer-portal

Generate shared library

nx g @nx/angular:library shared-ui

Applications vs Libraries

Applications Libraries
Deployable Shared code
Business features Reusable components
Entry point Utility logic
Routing Models
Pages Services

Applications consume libraries rather than duplicating code.

Dependency Graph

Nx generates a dependency graph showing relationships between projects.

Command

nx graph

Dependency Graph Architecture

flowchart LR

CustomerPortal

CustomerPortal --> SharedUI

CustomerPortal --> AuthLibrary

CustomerPortal --> SharedModels

AdminPortal --> SharedUI

AdminPortal --> SharedModels

AdminPortal --> Utilities

Benefits

  • Visualize dependencies
  • Detect circular references
  • Simplify refactoring
  • Improve architecture

Shared Libraries

Typical libraries include:

libs/

ui/

auth/

models/

shared/

data-access/

utilities/

Advantages

  • Reusable code
  • Consistent implementation
  • Easier maintenance

Library Types

Library Responsibility
ui Reusable components
auth Authentication
data-access API communication
feature Business logic
util Utility functions
models Interfaces and types

Affected Commands

Nx only rebuilds and tests projects affected by a code change.

Examples

nx affected:test

nx affected:build

nx affected:lint

Benefits

  • Faster builds
  • Shorter CI execution
  • Better scalability

Affected Build Flow

flowchart LR

CodeChange

CodeChange --> Nx

Nx --> DependencyAnalysis

DependencyAnalysis --> AffectedProjects

AffectedProjects --> Build

Computation Caching

Nx caches previous task results.

If nothing has changed:

  • Build results are reused
  • Tests are skipped
  • Lint results are reused

Example

nx build customer-portal

Second execution is significantly faster if inputs remain unchanged.

Nx Cache Architecture

flowchart LR

Developer

Developer --> Build

Build --> Cache

Cache --> Output

Generators

Nx Generators automate project creation.

Examples

nx g component customer-card

nx g library shared-ui

nx g service auth

Benefits

  • Consistent project structure
  • Less manual work
  • Standardized code generation

Executors

Executors define how tasks are executed.

Examples

  • Build
  • Test
  • Lint
  • Serve
  • Deploy

Example

nx build customer-portal

Module Federation with Nx

Nx simplifies Angular Microfrontend development.

Example

Host

↓

Customer Remote

↓

Payment Remote

↓

Loan Remote

Nx provides generators for configuring Module Federation.

Module Federation Architecture

flowchart TD

Host

Host --> CustomerRemote

Host --> PaymentRemote

Host --> LoanRemote

CustomerRemote --> SharedLibraries

PaymentRemote --> SharedLibraries

LoanRemote --> SharedLibraries

CI/CD Integration

Typical pipeline

Commit

↓

Affected Lint

↓

Affected Test

↓

Affected Build

↓

Deploy

Instead of building the entire workspace, Nx builds only impacted projects.

Enterprise Banking Example

Workspace

apps/

customer-portal

admin-portal

loan-portal

payment-portal

mobile-web

libs/

ui

auth

models

shared

api

utilities

Each application shares common libraries while remaining independently deployable.

Enterprise Architecture

flowchart TD

NxWorkspace

NxWorkspace --> CustomerPortal

NxWorkspace --> PaymentPortal

NxWorkspace --> AdminPortal

CustomerPortal --> SharedUI

PaymentPortal --> SharedUI

AdminPortal --> SharedUI

SharedUI --> DesignSystem

Performance Best Practices

Practice Benefit
Use Shared Libraries Reduce duplication
Enable Computation Cache Faster builds
Use Affected Commands Faster CI
Organize by Domain Better architecture
Keep Libraries Small Easier maintenance
Avoid Circular Dependencies Better scalability
Generate Code with Nx Consistent structure
Use Module Federation When Needed Scalable frontend architecture

Common Mistakes

Putting Everything in Shared

Not all code belongs in a shared library.

Group libraries by responsibility.

Circular Dependencies

Avoid

Customer Library

↓

Payment Library

↓

Customer Library

Circular dependencies complicate builds and maintenance.

Large Libraries

Huge libraries slow builds and reduce modularity.

Create focused libraries.

Ignoring Dependency Graph

Regularly review the dependency graph to identify architectural issues.

Rebuilding Everything

Use nx affected commands instead of rebuilding the entire workspace.

Nx Best Practices

Practice Recommendation
Feature-Based Libraries Yes
Use Affected Commands Yes
Enable Cache Yes
Shared UI Library Yes
Separate Data Access Yes
Avoid Circular Dependencies Yes
Visualize Dependency Graph Yes
Optimize CI/CD Yes

Nx vs Traditional Angular Workspace

Traditional Workspace Nx Workspace
Limited scalability Enterprise scalability
Basic build system Smart build system
Full rebuilds Incremental builds
No dependency graph Dependency graph
Limited caching Advanced computation cache
Basic generators Powerful generators
Basic CI Optimized CI/CD

Advantages

Benefit Description
Monorepo Management Multiple projects in one workspace
Shared Libraries Maximum code reuse
Faster Builds Incremental execution
Dependency Graph Better architecture visualization
Smart Cache Reduced build time
Enterprise Ready Ideal for large development teams

Top 10 Nx Monorepo Interview Questions

1. What is Nx?

Answer

Nx is a smart build system and monorepo tool that helps manage multiple applications and libraries with features like dependency analysis, caching, generators, and CI/CD optimization.

2. What is a Monorepo?

Answer

A Monorepo stores multiple related applications, libraries, and shared code within a single repository.

3. Why use Nx?

Answer

Nx improves scalability, code sharing, build performance, testing efficiency, developer productivity, and CI/CD execution.

4. What is the Dependency Graph?

Answer

The Dependency Graph visualizes relationships between applications and libraries, helping developers understand dependencies and detect architectural issues.

5. What are Affected Commands?

Answer

Affected Commands analyze source code changes and execute tasks only for impacted projects, reducing build and test times.

6. What is Computation Caching?

Answer

Computation Caching stores task outputs so unchanged builds, tests, and lint operations can reuse previous results instead of running again.

7. What are Nx Libraries?

Answer

Libraries contain reusable code such as UI components, services, utilities, models, and data-access logic shared across applications.

8. Can Nx support Angular Microfrontends?

Answer

Yes. Nx provides generators and tooling for Angular Module Federation, making it easier to build Host and Remote applications.

9. How does Nx improve CI/CD?

Answer

Nx reduces pipeline time by combining dependency analysis, affected commands, caching, and parallel task execution.

10. What are Nx best practices?

Answer

  • Organize libraries by domain
  • Use affected commands
  • Enable computation caching
  • Keep libraries focused
  • Avoid circular dependencies
  • Review the dependency graph regularly
  • Optimize CI/CD pipelines

Interview Cheat Sheet

Topic Recommendation
Repository Strategy Monorepo
Build Tool Nx
Shared Code Libraries
Dependency Analysis nx graph
Incremental Build nx affected
Smart Cache Computation Cache
Code Generation Generators
Task Execution Executors
Enterprise Apps Nx Workspace
Microfrontends Module Federation

Summary

Nx is one of the most powerful tools for managing enterprise Angular applications. By combining monorepo management, dependency analysis, smart caching, generators, affected commands, and optimized CI/CD workflows, Nx enables development teams to build scalable, maintainable, and high-performance applications. Its support for shared libraries and Module Federation makes it an excellent choice for large organizations managing multiple Angular applications within a single workspace.

Key Takeaways

  • ✅ Nx is a smart build system designed for monorepos.
  • ✅ A monorepo stores multiple applications and libraries in one repository.
  • ✅ Shared libraries reduce code duplication and improve consistency.
  • ✅ nx graph visualizes project dependencies.
  • ✅ nx affected runs tasks only for impacted projects.
  • ✅ Computation caching significantly reduces build times.
  • ✅ Generators standardize project structure and code creation.
  • ✅ Nx integrates well with Angular Module Federation.
  • ✅ Optimized CI/CD pipelines are a major advantage of Nx.
  • ✅ Nx Monorepo architecture is a common enterprise Angular interview topic.

Next Article

➡️ 123-Angular-Design-System-QA.md