如何在 Angular 中集成 WinBox JS？

Question

I am playing with a javascript library called WinBoxJS. I know how to use this with plain JS. I am trying to use it in my Angular project. How can I do that?

https://www.npmjs.com/package/winbox

I installed the winbox using npm. I also included the styles and scripts in the angular.json. I acn make it work if I use the JS and CSS files and add some script in index.html. But, I want it to Angular way. Any idea?

Answer 1

DISCLAIMER: The code below works for the current version of winbox ie winbox@0.1.92

You can use it in Angular by following the steps below:

1. Install winbox:

   npm i winbox@0.1.92

2. Add winbox CSS to your styles.css / styles.scss :

   @import '~winbox/dist/css/winbox.min.css';

3. Add the winbox bundle to your angular.json scripts at path - ( projects.projectName.architect.build.options.scripts ):

    "scripts": [ "node_modules/winbox/dist/winbox.bundle.js" ]

4. Add a declaration for WinBox to your Component. The line below declares WinBox in app.component.ts :

   declare const WinBox: any;

5. Use WinBox as per their Documentation here .

Here's a Working Sample StackBlitz for your ref.