How to Create a Library Package from an existing Angular App
Tags: angular, libraries, npm, tutorial
Published: 2024-06-15 21:02:20

Creating a library package from an existing Angular application can significantly streamline code reuse and modularity across different projects. In this guide, we'll walk through the process using the `ng-packagr` tool, with an example based on the [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app).

## Prerequisites

Before we begin, ensure you have an existing Angular project. For this example, we'll use the Ionic Conference App.

1. Clone the Ionic Conference App:
   ```sh
   git clone https://github.com/ionic-team/ionic-conference-app
   cd ionic-conference-app
   ```

## Step 1: Install ng-packagr

First, install `ng-packagr` in your project:
```sh
npm install ng-packagr
```

## Step 2: Create ng-package.json

Next, create a `ng-package.json` file in the root of your project with the following content:

```json
{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "allowedNonPeerDependencies": [
        "@angular/common",
        "@angular/core",
        "@angular/forms",
        "@angular/platform-browser",
        "@angular/router",
        "@angular/service-worker",
        "@awesome-cordova-plugins/core",
        "@awesome-cordova-plugins/in-app-browser",
        "@capacitor/android",
        "@capacitor/app",
        "@capacitor/core",
        "@capacitor/device",
        "@capacitor/haptics",
        "@capacitor/ios",
        "@capacitor/keyboard",
        "@capacitor/splash-screen",
        "@capacitor/status-bar",
        "@ionic/angular",
        "@ionic/storage-angular",
        "cordova-plugin-inappbrowser",
        "core-js",
        "rxjs",
        "sw-toolbox",
        "wait-on",
        "webdriver-manager",
        "zone.js"
    ]
}
```

This configuration file specifies the dependencies that are allowed in the package. The app depends on those packages, so we need to add them inside **allowedNonPeerDependencies**.

## Step 3: Create a Public API File

Create a `public_api.ts` file in the `src` folder to export the components and modules you want to make available for import in other projects. For example:

```typescript
export * from './app/shared/shared.component';
export * from './app/shared/shared.module';
```

## Step 4: Define Components and Modules

Define the components and modules you want to share. Here’s an example of a shared component and module:

### `shared.component.ts`
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-shared',
  template: `
    <div>
      <h2>Shared Component</h2>
      <p>This is a shared component created for reuse.</p>
    </div>
  `
})
export class SharedComponent { }
```

### `shared.module.ts`
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';

@NgModule({
  declarations: [
    SharedComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SharedComponent
  ]
})
export class SharedModule { }
```

## Step 5: Update package.json Scripts

Add the following script to your `package.json`:
```json
"scripts": {
  "package": "ng-packagr -p ng-package.json"
}
```

Run this script to generate the package in the `dist` folder:
```sh
npm run package
```

## Step 6: Link the Package Locally

Once the package is generated, navigate to the `dist` folder and create a link to reuse the package locally:
```sh
cd dist
npm link
```

## Step 7: Consume the Library in Another Project

In the project where you want to use the library, run the following command to link the library:
```sh
npm link ionic-conference-app
```

Import the necessary components and modules from the library and use them in your project. If you encounter build errors during execution, add the following to `angular.json` to resolve symlink issues:

```json
"architect": {
  "build": {
    "options": {
      "preserveSymlinks": true
    }
  }
}
```

## Step 8: Make Changes and Rebuild the Package

If you need to make changes to your library package, update the code as needed and then run the packaging script again to generate the updated package:

1. Make your changes to the components, modules, or any other part of the library.
2. Run the packaging script to rebuild the package:
   ```sh
   npm run package
   ```

## Conclusion

By following these steps, you can efficiently create a library package from an existing Angular application and reuse components and modules across different projects. This approach not only promotes code reuse but also simplifies maintenance and updates. Happy coding!