Shared Libraries and Monorepo Layout

A monorepo places apps and libraries under one workspace with a single dependency graph, enabling code sharing and consistent tooling.

Angular CLI Workspace

# Create a new workspace
ng new my-workspace --create-application=false

# Generate an application
ng generate application my-app

# Generate a library
generate library my-lib

Workspace Structure

my-workspace/
├── angular.json
├── package.json
├── tsconfig.json
├── nx.json                    # If using Nx
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   ├── angular.json
│   │   └── project.json
│   └── my-app-e2e/
│
├── libs/
│   ├── shared-ui/           # Reusable UI components
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   └── index.ts      # Public API
│   │   ├── ng-package.json
│   │   └── project.json
│   │
│   ├── shared-utils/         # Utility functions
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   └── index.ts
│   │   └── ng-package.json
│   │
│   └── feature-users/        # Feature library
│       ├── src/
│       │   ├── lib/
│       │   └── index.ts
│       └── ng-package.json
│
└── tools/
    └── schematics/

Buildable libraries compile independently, speeding up large workspace builds. Publishable libraries can be packaged for npm.

Library Configuration

// libs/shared-ui/ng-package.json
{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/libs/shared-ui",
  "lib": {
    "entryFile": "src/index.ts"
  }
}

Public API (index.ts)

// libs/shared-ui/src/index.ts
export * from './lib/button/button.component';
export * from './lib/modal/modal.component';
export * from './lib/card/card.component';

Building Libraries

# Build a specific library
ng build shared-ui

# Build all libraries
ng run-many --target=build --all

# Build with dependencies
ng build shared-ui --with-deps

Using Libraries in Apps

// In app.config.ts or component imports
import { ButtonComponent } from '@my-workspace/shared-ui';

@Component({
  imports: [ButtonComponent],
})
export class MyComponent {}

Library Types

Nx Integration

Nx provides additional monorepo features:

# Install Nx
npm install nx --save-dev

# Generate a library
nx generate @nx/angular:library shared-ui

# Run affected builds
nx affected:build

# Visualize dependencies
nx graph