How to Create a Library Package from an existing Angular App

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.

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:

   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:

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:

{
    "$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:

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

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

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:

"scripts": {
  "package": "ng-packagr -p ng-package.json"
}

Run this script to generate the package in the dist folder:

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:

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:

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:

"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:

   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!