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.
Clone the Ionic Conference App:
cd ionic-conference-app
Step 1: Install ng-packagr
First, install ng-packagr in your project:
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.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
@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 { 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:
“package”: “ng-packagr -p ng-package.json”
}
Run this script to generate the package in the dist folder:
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:
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:
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:
“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:
Make your changes to the components, modules, or any other part of the library.
Run the packaging script to rebuild the 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!
