Suppose there exists a Javascript library written in plain Javascript and monly 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?
Suppose there exists a Javascript library written in plain Javascript and monly 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?
- It kind of depends on what the library does. If it's using the DOM or not is a huge difference. – RaidenF Commented Jul 25, 2018 at 14:03
- I am asking about one that uses the DOM specifically but I'm curious about all types in general – CodyBugstein Commented Jul 25, 2018 at 15:10
2 Answers
Reset to default 9 +25Personally, 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
Wrapping a native library for Angular is a plex process as the specifics change from library to library. That being said, there are monalities we could take advantage of.
The main 3 concerns when designing a wrapper library are:
- Detecting changes in your Angular library and delegating them to the native library.
- Detecting native events and bubbling them into your Angular library.
- 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