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:
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:
- Make your changes to the components, modules, or any other part of the library.
- 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!
Top comments (0)