Creating Libraries in Angular: Packaging Reusable Code.

Creating Libraries in Angular: Packaging Reusable Code (A Lecture You Might Actually Enjoy!) 🤓

Alright class, settle down, settle down! Today, we’re diving into the fascinating world of Angular Libraries! 🚀 Forget those dusty old tomes you’re picturing. This is about making your code reusable, sharable, and frankly, a lot less of a pain in the rear. Think of it as Legos for your Angular projects – snapping together pre-built components and services like a coding master builder!

Why Libraries, You Ask? (Besides Saving Your Sanity)

Imagine you’ve built this absolutely killer date picker component. It’s got everything: themes, validations, the ability to predict your future based on your birthdate (okay, maybe not that last one). Now, you’re starting a new project, and guess what? You need a date picker. Are you seriously going to rebuild the whole darn thing? NOPE! That’s where libraries swoop in like a coding superhero. 🦸‍♀️

Here’s the lowdown on why libraries are your new best friend:

• Reusability: Code once, use everywhere! Avoid the dreaded copy-paste monster. 👹
• Maintainability: Fix a bug in one place, and it’s fixed everywhere the library is used. Talk about efficiency! 🤩
• Organization: Keep your core application code clean and focused by moving reusable parts into separate libraries. It’s like Marie Kondo-ing your codebase. ✨
• Sharing: Share your amazing code with other developers, either within your organization or even the entire Angular community! Become a coding rockstar! 🎸
• Team Collaboration: Different teams can work on different libraries independently, speeding up development and reducing conflicts. It’s like having a perfectly synchronized coding orchestra. 🎼

So, What Is an Angular Library Anyway?

In simple terms, an Angular library is a collection of pre-built components, services, directives, pipes, and other Angular goodies that you can package up and reuse in multiple applications. Think of it as a mini-Angular application, but without the main application shell. It’s like a toolbox filled with useful gadgets ready to be deployed. 🧰

Let’s Get Our Hands Dirty: Creating Our First Library!

Ready to roll up your sleeves and get coding? Let’s create a simple library that will display a "Hello World!" message in a fancy, reusable component.

1. Generate the Library:

Fire up your terminal and navigate to your Angular workspace (the folder where you have your angular.json file). Then, run the following command:

ng generate library my-awesome-library

Replace my-awesome-library with your desired library name. (Pro-tip: keep it short and sweet, like "cool-button" or "fancy-form".)

This command does a bunch of things for you:

• Creates a new folder named projects/my-awesome-library (or whatever you named it).
• Generates a basic library structure with a module (my-awesome-library.module.ts) and a component (my-awesome-library.component.ts).
• Updates your angular.json file to include the library configuration.
• Adds a new path to your tsconfig.json file to allow you to import the library from your application.

2. Explore the Library Structure:

Take a look inside the projects/my-awesome-library folder. You’ll find something like this:

my-awesome-library/
├── src/
│   ├── lib/
│   │   ├── my-awesome-library.component.html
│   │   ├── my-awesome-library.component.scss
│   │   ├── my-awesome-library.component.spec.ts
│   │   ├── my-awesome-library.component.ts
│   │   ├── my-awesome-library.module.ts
│   │   └── my-awesome-library.service.ts
│   ├── public-api.ts
│   └── test.ts
├── ng-package.json
└── package.json

Let’s break down the key files:

• src/lib/: This is where your library’s code lives. You’ll find your components, services, directives, pipes – all the cool stuff.
• src/lib/my-awesome-library.module.ts: This is the Angular module that declares and exports your library’s components and services. It’s the entry point to your library.
• src/lib/my-awesome-library.component.ts & src/lib/my-awesome-library.component.html: These are the TypeScript and HTML files for your library’s main component. This is where you’ll define the component’s logic and template.
• src/public-api.ts: This file is crucial. It defines what parts of your library are publicly accessible. Anything you want to be used by other applications needs to be exported from here. Think of it as the library’s front door. 🚪
• ng-package.json: This file configures how your library is built and packaged. It specifies the entry point, the output directory, and other important settings.
• package.json: This is a standard Node.js package file that contains metadata about your library, like its name, version, and dependencies.

3. Customize the Library Component:

Let’s modify our MyAwesomeLibraryComponent to display our "Hello World!" message.

Open src/lib/my-awesome-library.component.ts and change the template in the @Component decorator to:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-my-awesome-library',
  template: `
    <p>
      Hello World from My Awesome Library! 👋
    </p>
  `,
  styles: [
  ]
})
export class MyAwesomeLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

(You can also modify the templateUrl to point to a separate HTML file if you prefer.)

4. Export the Component:

To make our component accessible from other applications, we need to export it from both the module and the public-api.ts file.

First, open src/lib/my-awesome-library.module.ts and add MyAwesomeLibraryComponent to the exports array:

import { NgModule } from '@angular/core';
import { MyAwesomeLibraryComponent } from './my-awesome-library.component';

@NgModule({
  declarations: [
    MyAwesomeLibraryComponent
  ],
  imports: [
  ],
  exports: [
    MyAwesomeLibraryComponent // <--- Add this line!
  ]
})
export class MyAwesomeLibraryModule { }

Next, open src/public-api.ts and export the module and the component:

/*
 * Public API Surface of my-awesome-library
 */

export * from './lib/my-awesome-library.service';
export * from './lib/my-awesome-library.component';
export * from './lib/my-awesome-library.module';

5. Build the Library:

Now it’s time to build our library. Run the following command in your terminal:

ng build my-awesome-library

This will compile your library’s code and package it into a distributable format. You’ll find the compiled library files in the dist/my-awesome-library folder.

6. Using the Library in an Application:

Now for the fun part – using our library in an Angular application!

Scenario 1: Using the Library in the Same Workspace

If you’re using the library in the same workspace where you created it, you can import it directly using its path alias.

• Import the Module: In your application’s module (e.g., app.module.ts), import MyAwesomeLibraryModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyAwesomeLibraryModule } from 'my-awesome-library'; // <--- Import the library module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyAwesomeLibraryModule // <--- Add the library module to the imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Use the Component: In your application’s component template (e.g., app.component.html), use the lib-my-awesome-library selector:

<h1>My Awesome Application</h1>
<lib-my-awesome-library></lib-my-awesome-library>

Run your application (ng serve), and you should see "Hello World from My Awesome Library! 👋" displayed on the page! 🎉

Scenario 2: Using the Library in a Different Project (Published to npm)

To use your library in a completely separate project (or to share it with the world!), you’ll need to publish it to npm (or a private npm registry).

• Package the Library: The ng build command already created the packaged library in the dist/my-awesome-library folder.
• Login to npm: Make sure you have an npm account and are logged in:

npm login

• Publish the Library: Navigate to the dist/my-awesome-library folder in your terminal and run:

npm publish

Important Considerations Before Publishing:

• Version Number: Make sure your library has a unique and meaningful version number in its package.json file. Follow semantic versioning (SemVer) principles.
• Documentation: Include clear documentation in your library’s README file on how to install and use it.
• Peer Dependencies: If your library depends on specific versions of Angular packages, declare them as peerDependencies in your package.json file. This prevents version conflicts when your library is used in other projects.
• Scope: If you want to publish your library to a private npm registry (e.g., within your organization), you’ll need to use a scoped package name (e.g., @my-org/my-awesome-library).

Using the Published Library:

• Install the Library: In your other project, install the library using npm:

npm install my-awesome-library  // or npm install @my-org/my-awesome-library if you used a scope

• Import and Use: Follow the same steps as in Scenario 1 (import the module in your application’s module and use the component selector in your template).

Advanced Library Features (Because "Hello World!" Is Just the Beginning)

Now that you’ve mastered the basics, let’s explore some more advanced library features:

• Services: Create reusable services that can be injected into components in both your library and your applications.
• Directives: Build custom directives to manipulate the DOM and add behavior to existing HTML elements.
• Pipes: Create custom pipes to transform data in your templates.
• Themes: Design your library with theming in mind, allowing users to customize the appearance of your components.
• Configuration: Provide a configuration service or module that allows users to configure your library’s behavior.
• Input and Output Properties: Use @Input() and @Output() decorators to pass data into and out of your components, making them more flexible and reusable.

Example: Creating a Reusable Button Component with Input Properties

Let’s create a button component that allows users to customize its text and color.

1. Generate the Button Component:

ng generate component my-button --project my-awesome-library

2. Modify the Component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'lib-my-button',
  template: `
    <button [style.backgroundColor]="backgroundColor">
      {{ buttonText }}
    </button>
  `,
  styles: [
    `button {
      padding: 10px 20px;
      border: none;
      color: white;
      cursor: pointer;
    }`
  ]
})
export class MyButtonComponent implements OnInit {

  @Input() buttonText: string = 'Click Me!';
  @Input() backgroundColor: string = 'blue';

  constructor() { }

  ngOnInit(): void {
  }

}

3. Export the Component: Make sure to export MyButtonComponent from your library’s module and public-api.ts file.

4. Use the Component in Your Application:

<h1>My App</h1>
<lib-my-button buttonText="Save" backgroundColor="green"></lib-my-button>
<lib-my-button buttonText="Cancel" backgroundColor="red"></lib-my-button>

Now you have a reusable button component that can be customized with different text and colors!

Testing Your Library (Don’t Be a Cowboy!)

Testing is crucial for ensuring the quality and reliability of your library. Use the testing framework provided by Angular (Jasmine and Karma) to write unit tests for your components, services, and directives.

Key Testing Considerations:

• Component Interactions: Test that your components handle user interactions correctly (e.g., button clicks, form submissions).
• Input and Output Properties: Verify that data is passed correctly between your components and the applications that use them.
• Service Logic: Test the logic in your services to ensure they perform as expected.
• Edge Cases: Test your library with different input values and scenarios to identify potential issues.

Documenting Your Library (Because No One Reads Code… Except When They Have To)

Good documentation is essential for making your library easy to use and understand. Use tools like Compodoc or Storybook to generate documentation from your code.

Key Documentation Elements:

• Installation Instructions: Clearly explain how to install your library using npm.
• Usage Examples: Provide code examples that demonstrate how to use your library’s components and services.
• API Reference: Document the input and output properties, methods, and events of your components and services.
• Theming and Configuration: Explain how to customize the appearance and behavior of your library.

Summary Table: Angular Library Development Checklist

Step	Description	Importance
Generate Library	ng generate library <library-name> creates the basic project structure.	High
Implement Components/Services	Develop the reusable code for your library.	High
Export Public API	Expose the necessary components, services, etc. through public-api.ts.	High
Configure ng-package.json	Set build configurations for your library (entry point, output, etc.).	High
Build Library	ng build <library-name> compiles and packages your library.	High
Test Library	Write unit tests to ensure functionality and prevent regressions.	High
Document Library	Create clear and concise documentation for users.	High
Version Library	Assign a meaningful version number following SemVer principles.	High
Publish Library (Optional)	npm publish makes your library available on npm.	Optional
Use Library	Import and use your library in other Angular applications.	High

Conclusion: Go Forth and Build Awesome Libraries!

Creating Angular libraries is a powerful way to write reusable, maintainable, and shareable code. By following the steps outlined in this lecture, you can build your own collection of awesome libraries and become a coding superhero! Remember, practice makes perfect, so start experimenting and building your own custom components and services. Now go forth and conquer the world of reusable Angular code! 🌍 And remember, if you get stuck, Google is your friend. But if Google fails you, well, you can always ask me. (But only if you’ve really tried everything else.) 😉 Good luck, class! Class dismissed! 🔔