Libraries and Workspaces

📦 Angular Libraries & Workspaces: Building Your LEGO City

Imagine you’re building a LEGO city. You don’t build everything from scratch each time—you create reusable buildings that can be placed in any city you want!

🌟 The Big Picture

Think of Angular workspaces like a big toy box that holds all your LEGO sets together. Inside this toy box, you can have:

• Applications (the actual cities you build)
• Libraries (reusable buildings you can put in ANY city)

One workspace = One organized toy box with everything you need!

🏭 What is a Library?

The Cookie Cutter Analogy

Imagine you love making star-shaped cookies. Instead of carving a star by hand every time, you use a cookie cutter!

• Cookie Cutter = Angular Library
• Cookies = Features you use in different apps

A library is reusable code you create once and use everywhere.

Real-Life Examples

🎨 Library Creation

Step 1: Create Your Library

Open your terminal and type:

ng generate library my-buttons

What just happened?

• Angular created a projects/ folder
• Inside is your my-buttons library
• It has its own files, separate from your app!

Step 2: The Library Structure

projects/
└── my-buttons/
    ├── src/
    │   ├── lib/
    │   │   ├── my-buttons.component.ts
    │   │   ├── my-buttons.module.ts
    │   │   └── my-buttons.service.ts
    │   └── public-api.ts  ← The "front door"
    └── package.json

The Front Door (public-api.ts)

Think of public-api.ts as your library’s front door. Only things you put here can be used by others!

// public-api.ts
export * from './lib/my-buttons.module';
export * from './lib/my-buttons.component';

🔑 Key Point: If you don’t export it here, nobody outside can use it!

📦 ng-packagr: The Gift Wrapper

What is ng-packagr?

Remember wrapping birthday presents? ng-packagr is like a gift-wrapping machine for your Angular libraries!

It takes your library code and:

1. ✅ Packages it nicely
2. ✅ Makes it work everywhere
3. ✅ Prepares it for sharing (npm)

How It Works

graph TD
    A["Your Library Code"] --> B["ng-packagr"]
    B --> C["Wrapped Package"]
    C --> D["Ready to Share!"]
    style B fill:#4ecdc4,color:#fff
    style D fill:#ff6b6b,color:#fff

Building Your Library

ng build my-buttons

Magic happens! Your library is now in dist/my-buttons/ ready to use or publish!

The ng-package.json File

This tiny file tells ng-packagr how to wrap your gift:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-buttons",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

⚙️ Workspace Configuration

The angular.json File: Your Control Center

Think of angular.json as the remote control for your entire workspace. It tells Angular:

• Where are your projects?
• How to build each one?
• What settings to use?

Key Parts of angular.json

{
  "projects": {
    "my-app": {
      "projectType": "application",
      "root": "projects/my-app"
    },
    "my-buttons": {
      "projectType": "library",
      "root": "projects/my-buttons"
    }
  }
}

Project Types

Default Project Setting

{
  "defaultProject": "my-app"
}

When you run ng serve without a name, it uses this one!

🏗️ Multi-Project Workspace

The Apartment Building Analogy

A multi-project workspace is like an apartment building:

• The building = Your workspace
• Each apartment = A different project
• Shared hallways = Shared libraries

Everyone lives in the same building but has their own space!

Creating a Multi-Project Workspace

Method 1: Start Fresh

ng new my-company --create-application=false
cd my-company
ng generate application store-app
ng generate application admin-app
ng generate library shared-ui

Method 2: Add to Existing

ng generate application new-app
ng generate library new-library

Your Workspace Structure

my-company/
├── projects/
│   ├── store-app/         ← App 1
│   ├── admin-app/         ← App 2
│   └── shared-ui/         ← Shared Library
├── angular.json           ← Control center
├── package.json           ← All dependencies
└── tsconfig.json          ← TypeScript settings

Working with Multiple Projects

Build a specific app:

ng build store-app

Serve a specific app:

ng serve admin-app

Build your library:

ng build shared-ui

🔗 Using Libraries in Your Apps

Step 1: Build the Library First

ng build shared-ui

Step 2: Import in Your App

// In store-app's module
import { SharedUiModule } from 'shared-ui';

@NgModule({
  imports: [SharedUiModule]
})
export class AppModule { }

The Path Mapping Magic

Angular sets this up automatically in tsconfig.json:

{
  "paths": {
    "shared-ui": ["dist/shared-ui"]
  }
}

This lets you import shared-ui like it’s from npm!

🎯 Quick Summary

graph TD
    A["Workspace"] --> B["Applications"]
    A --> C["Libraries"]
    B --> D["store-app"]
    B --> E["admin-app"]
    C --> F["shared-ui"]
    F -.-> D
    F -.-> E
    style A fill:#667eea,color:#fff
    style C fill:#4ecdc4,color:#fff
    style F fill:#ff6b6b,color:#fff

💪 You Did It!

You now understand how Angular organizes big projects! Think of it this way:

• Workspace = Your toy box
• Libraries = LEGO pieces you reuse
• ng-packagr = The packaging machine
• angular.json = The instruction manual

Go build something amazing! 🚀