featured image for

Angular plugin

Angular plugin development

Angular is one of the most popular web development frameworks for single page applications.

Angular has evolved over time with a focus on pure typescript code, CSS for each template and a rich plugin ecosystem.

The build tools have also changed over time with a rather intensive development process.

In this article we shall see how the Angular plugin was built for progress-up.

Plugin architecture

The plugin has only 3 files.

  • progress-up.component.css
  • progress-up.component.html
  • progress-up.component.ts

And a progress-up.module.ts

The plugin has most of the functionality in the typescript file and the HTML template.

How it works?

Angular has a very sophisticated build system as well as a pure typescript approach to development where javascript third party plugins cannot be used.

But progress-up uses the progress loaders from loading.io which is written in javascript.

How you can use the plugin?

The stackblitz link has the instructions and help needed.

In short, just installing using npm or yarn like this will get you started.

	$ yarn install progress-up-angular


	$ npm install progress-up-angular

Then just put this inside the HTML source the tags needed and you are done.



The plugin development had a lot of difficulties, but then the build process and testing was very labor intensive since the linking involved a lot of reinstalls.

Angular takes a really long time to build everytime.

And the caching is very annoying too. You need to delete the .angular directory as well or you see the cached version.

Back to blog