Reusable Angular Components Library in a Monorepo (Without Nx Overkill)

#webdev #beginners #programming #angular

If you ask Reddit how to share code between two Angular applications, the answer is always the same: "Use Nx."

Nx is a powerful build system. It offers distributed caching, dependency graph visualization, and advanced tooling. But for a team of three developers building a simple Admin Portal and a Customer App, Nx introduces a steep learning curve and a heavy configuration overhead.

You do not need third-party tools to create a Monorepo.

Since version 7, the Angular CLI has supported Workspaces natively. You can manage multiple applications and a shared UI library in a single repository using standard Angular commands.

Here is the lightweight architecture for sharing components in 2025.

1. The Empty Workspace (The Foundation)

Most developers start by running ng new my-app. This creates a root application. We do not want that. We want a neutral container that holds multiple projects.

The Command:

Copyng new enterprise-workspace --no-create-application

The Structure: This creates a package.json and an angular.json, but no src folder. This is your blank canvas.

2. Generating the Shared Library

We will create a library that holds our "dumb" components (Buttons, Inputs, Cards).

The Command:

Copycd enterprise-workspace
ng generate library @corp/ui-kit

What happened?

A projects/ui-kit folder was created.
angular.json was updated to know about this project of type library.
tsconfig.json was updated with a Path Mapping.

The projects Directory:

Copyenterprise-workspace/
├── angular.json
├── package.json
├── tsconfig.json
└── projects/
    └── ui-kit/         <-- Your Shared Code
        ├── src/
        ├── package.json
        └── ng-package.json

3. The "Secret Sauce": Path Mapping for DX

This is the step most tutorials miss.

By default, the CLI configures your workspace to consume the built version of the library.

Default tsconfig.json:

Copy"paths": {
  "@corp/ui-kit": [
    "dist/ui-kit"
  ]
}

The Problem: Every time you change a color in your button component, you have to run ng build ui-kit. If you forget, your app does not update. This destroys the Developer Experience (DX).

The Fix: Point the path directly to the source code.

Optimized tsconfig.json:

Copy"paths": {
  "@corp/ui-kit": [
    "projects/ui-kit/src/public-api.ts"
  ]
}

The Result: Now, your library is treated as local source files. When you run ng serve on your application, it watches the library files. If you save a file in ui-kit, the app hot-reloads instantly. No build step required.

4. Creating the Consumers (Applications)

Now we generate the actual applications that users will see.

The Commands:

Copyng generate application admin-portal
ng generate application customer-app

We now have three projects in projects/.

Integration: Open projects/admin-portal/src/app/app.component.ts:

Copyimport { Component } from '@angular/core';
import { UiButtonComponent } from '@corp/ui-kit'; // Imports cleanly

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [UiButtonComponent], // Uses the shared component
  template: `
    <h1>Admin Portal</h1>
    <lib-ui-button label="Submit"></lib-ui-button>
  `
})
export class AppComponent {}

Because of our TypeScript path mapping, the editor knows exactly where to find @corp/ui-kit.

5. Managing Dependencies (The One Rule)

In a native CLI workspace, you have one single package.json at the root.

The Advantage: You never have version mismatches. You cannot have admin-portal using Angular 17 and customer-app using Angular 18. The entire repo upgrades together.

The Strategy:

Install dependencies at the root: npm install moment.
Use them in the library.
Use them in the apps.

Do not try to give each project its own node_modules. That is where complexity creeps in.

6. When Should You Switch to Nx?

This native approach is perfect for:

Teams of 1–10 developers.
Repos with 2–5 applications.
Shared libraries that are mostly UI components.

You need Nx when:

You have 20+ applications.
Your CI/CD times are over 20 minutes (Nx Distributed Caching is a lifesaver here).
You need to mix React and Angular in the same repo.