How does one go about creating an Angular library wrapper for an existing Javascript library?

Question

Suppose there exists a Javascript library written in plain Javascript and commonly used on vanilla, non-frameworked websites. How does one go about creating an Angular library that can easily be npm installed that would make the library seamless to use in an Angular app?

I cannot find any good demonstrations of this process in the Angular docs or on the wider web.

Just for instance, there is a fantastic Javascript library called p5.js, which is not straightforward to use with Angular. How would one go about creating an Angular module that you can simply import into your own Angular module and use all of its great features with full Angular support?

Teston

It kind of depends on what the library does. If it's using the DOM or not is a huge difference. – Anjanette

I am asking about one that uses the DOM specifically but I'm curious about all types in general – Teston

Answer 1

Personally, I would go with Angular CLI. Angular CLI v6 has ng-packgr built in.

Take a look at the create library story. Its pretty straightforward and it will get you started quickly and guide you with the best practices for updates as well.

Update: For Angular CLI v7 and later, see documentation here

Ottoottoman

Answer 2

Wrapping a native library for Angular is a complex process as the specifics change from library to library. That being said, there are commonalities we could take advantage of.

The main 3 concerns when designing a wrapper library are:

1. Detecting changes in your Angular library and delegating them to the native library.
2. Detecting native events and bubbling them into your Angular library.
3. Switching execution in and out of Angular using NgZone.

Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc. Let's say the native library has 1000 features. Would you implement all of them one by one?

There are ways to avoid having to manually implement each and every element in the native library while still bringing their features into your wrapper library. I've answered this in more details here

Impeller