Building My First Angular Package: A Loading Spinner for Angular 19

Introduction

As an Angular frontend developer passionate about technology, I recently built my first Angular package—a simple and customizable loading spinner for Angular 19 applications. In this blog post, I'll share my journey, explain how I built it, and show you how to use it in your projects.

Why I Built This Package

Loading animations improve user experience by visually indicating background processes. While Angular provides various third-party loaders, I wanted something lightweight, customizable, and easy to integrate into Angular 19 applications. So, I decided to create my own and publish it as an npm package.

Creating the Angular Library

To create the package, I followed these steps:

1. Generate a new Angular library

    ng new angular-loading-spinner --create-application=false  ##Workspace
    cd angular-loading-spinner  ##change directory
    ng generate library ng-loading-spinners
   

2. Develop the spinner component

   • Created a simple LoadingSpinnerComponent with inputs for size, color, and type.

   • Used SCSS for styling.

   • Added module exports for easy integration.

3. Build and prepare for publishing

    ng build loading-spinner ##building the library
   

Publishing to npm

Once the package was ready, I published it to npm:

1. Login to npm (if not already logged in):

    npm login  ##login into npm your account
   

2. Publish the package:

    npm publish dist/loading-spinner --access public
   

After a few minutes, the package was live on npm! 🎉

Using the Package in an Angular Project

To use my loading spinner in an Angular 19 app:

1. Install the package:

    npm i ng-loading-spinners
   

2. Import and use it:

3. so this library can be used as a standalone component your applications

    import { SpinnersComponent } from 'ng-loading-spinners'; 
   
     imports: [ SpinnersComponent]  ##added the spinnersComponent to you import array in your component
   

4. Use in a component template:

    <ng-loader-spinners [variant]="'default'" [size]="'md'" [color]="'primary'" [text]="'Loading...'"></ng-loader-spinners>
   

Find Package

click here for package

Challenges and Lessons Learned

Building and publishing my first Angular package taught me:

• The importance of proper module structure for library development.

• How to configure package.json for Angular libraries.

• The process of publishing to npm and making a package reusable.

Conclusion and Future Plans

Publishing my first Angular package was an exciting experience, and I look forward to improving it with more customization options. If you find it useful, feel free to try it out and provide feedback!