Skip to main content

Utilize 3rd party Javascript libraries in your Angular 2+ application with CLI

Not everything is available as a native Typescript library.

Due to that sometimes you might need to use 3rd party libraries. After creating a new project with Angular CLI you will experience that VS Code does not know any libraries you have imported in the header tag and the compiler complains when you try to use this libraries.

The reason is: You are missing the typings.

The typings describe the functionality of the libary and make that available in your project through intellisense and for the compiler.

But before you start creating your own typings do the following checks:

1. Does the vendor of the library provide the typings? If yes, install through npm
2. Are the typings available on definitely typed? If yes, then take it from there.

If this is not the case then you can do your own typings. If you want to do that properly, then you should write the complete set of typings for the library and upload to definitely typed to provide it for the community. OK, this might be difficult and time consuming, so what should you do then?
Yes, there is an easy way for your project. (Not the clean way)
To describe how to do that let's try to use particles.js in our application.

To include the particles.js library to your project you have two possibilities.

A) install the npm package 
npm install particles.js
That also means that you have to register the package in the .angular-cli.json file like that
"scripts": [
    "../node_modules/particles.js/.../...js"
  ]
Then CLI puts it into your bundles.

B) just import it in your index.html
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Let's choose B), so our bundles keep slim.

The next step is to put the 'div' that hosts the particles to your index.html, the component template or somewhere else in your project.
<div id="particles-js"></div>
Now we come to the big trick to utilize the library in the project.
To do that we add a typing in the typings.d.ts file or in the component where you want to use the library.
declare var particlesJS: any;
This makes the library visible in your project. The trick is the 'any' type. By that you can use particleJS.someFunction in your project without the compiler or the code editor complaining.
To run the particles we just add the following code:
particlesJS.load('particles-js', 'particles.json', null);
That's it. You can use this solution for any 3rd party library that does not provide typings.
If you want to see that working just open the plunker example I have made.

Comments

Popular posts from this blog

Create a simple Messageboard with Firebase and Angular4

You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase. First we have to import the Moduls for Firebase in our app.module.ts and our component. app.module.ts import  {  AngularFireModule  }  from   'angularfire2' ; import  {  AngularFireDatabaseModule ,  AngularFireDatabase ,  FirebaseListObservable  }  from   'angularfire2/database' ; @ NgModule ({    declarations:  [      AppComponent   ],    imports:  [      BrowserModule ,      FormsModule ,      HttpModule ,      AngularFireModule . initializeApp ( firebaseConfig ),      AngularFireDatabaseModule , We also have to configure the AngularFireModule. export   const   fireba...

Generate documentation for Angular projects with Compodoc

Sometimes the structure of Angular projects can become confusing. After adding tons of components and modules it might be difficult to keep track of what is what. Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features. How to install: Compodoc is available by npm. First install it globally: npm install -g @compodoc/compodoc Then install it in your project: npm install --save-dev @compodoc/compodoc In a next step you have to add a command to your package.json. In the 'scripts' area add the following line: "compodoc" :  "./node_modules/.bin/compodoc -p src/tsconfig.app.json" Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message. Finally generate the documentation and open it in the browser: npm run compodoc co...

Angular 2: Multiple instances in the same Application

Requirement:  Use multiple Root-Components in the same Application  This Root-Components use the same Implementations and Services Display the Root-Components on the same Single-Page Solution: App-Module preparation: import { BrowserModule, DOCUMENT } from '@angular/platform-browser'; import { NgModule, Inject, Component } from '@angular/core'; export class AppModule { private browser_document; ngDoBootstrap(appRef){ if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);} if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);} } constructor(@Inject(DOCUMENT) private document: any){ this.browser_document = document; } } Service preparation: Angular 2 has two options to provide a service. 1. Single instance For a multiple implementation of more Root-Components we need the second opt...