Some libraries are not supported by Angular like Clappr , HashWords etc . I want to use them in Angular as if they were an Angular library . So how can we make Angular support external libraries/modules ?

Some libraries are not supported by Angular like Clappr , HashWords etc . I want to use them in Angular as if they were an Angular library . So how can we make Angular support external libraries/modules ?

• javascript
• angular
• typescript
• web
• angular6

• 1 install the library you want to use then use it as described in documentation – Exterminator Commented Oct 15, 2018 at 10:47
• You might not get every library tuned to work with Angular. You just have to tune it yourself. You can get access to a "node" in Angular that you can hook up libraries that need DOM. Try this: blog.angularindepth./… – Faizuddin Mohammed Commented Oct 15, 2018 at 11:02
• @Exterminator , can u share the documentation link for the same ? I couldn't find documentation to make Angular patible with external unsupported libraries or modules . – NEHA Commented Oct 15, 2018 at 13:26
• 1 By any chance , do we need to make use of custom InjectionToken and use dependency injection to support external libraries and modules . Am i on the right track ? – NEHA Commented Oct 15, 2018 at 13:31
• you need to google them like this: 'package_name in angular' then it gives you link to the package you can read the documentation from there then download it and use it. – Exterminator Commented Oct 16, 2018 at 4:52

5 Answers 5

Add the library file in index.html. The variable exposed by the library can be used in ponent by declaring like this declare var Clappr: any; outside the ponent class.

If the library has a ES6 module, you can just import it.

If the library is just a JS file, you can add the file as if you where importing it using a <script> tag on index.html by adding the js file path on the scripts array in angular.json

If types are available you can add them to the types array on typescript.json

Here is a guide to do all that.

https://nitayneeman./posts/how-to-add-third-party-library-in-angular-cli/

If you dislike having the third party libraries as global variables you can turn them into inyectables. it's a more involved process but it's pretty neat.

Here is a guide for that too:

https://hackernoon./angular-providers-how-to-inject-3rd-party-library-af4a78722864

Here's how I installed in my Angular 9 project:

1. npm install clappr
2. Add clappr into angular.json:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "scripts": [
            "node_modules/clappr/dist/clappr.min.js"
          ],
          "styles": [
            "./src/styles.css"
          ]
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "scripts": [
            "node_modules/clappr/dist/clappr.min.js"
          ],
          "styles": [
            "./src/styles.css"
          ]
        }
      }

3. Create file index.d.ts and declare clappr as:

declare module 'clappr';

4. import it into ponent.ts file:

import * as Clappr from 'clappr';

1. Install the package into your project : npm i clappr
2. Import type declaration into Angular app : app.ponent.ts

For Clappr- In Angular CLI, run the mand-

npm i clappr

https://www.npmjs./package/clappr

Then follow the steps given..