Import 3rd party javascript libraries in Angular single components

Things like jQuery and bootstrap are global and will be available to the application. But, it is good practice to make them injectable and thus referable from single components.

First install jQuery

npm install --save jquery
npm install -D @types/jquery

Second make an injection module

import { NgModule } from '@angular/core';
import { InjectionToken } from '@angular/core';
import * as jquery from 'jquery';

export const JQUERY = new InjectionToken<jquery>('jQuery');

export function _jquery(): jquery {
  return jquery;
}

@NgModule({
  providers: [{
    provide: JQUERY,
    useFactory: _jquery
  }]
})
export class JqueryTokenModule { }

Third, in your module:

providers: [{provide: JQUERY, useValue: _jquery}]

Finally, inject it into your component

constructor(@Inject(JQUERY) private $) {
  // use `this.$` which is jQuery
}

You can import them inside component using import. For example for jQuery it will be

import * as $ from 'jquery';

which means "import all as '$' (and use it as '$' further) from 'jquery' library", and you don't really need to include another import to .angular.cli.json. It works fine for Angular 5 (I have tested it right now), I think, it should work for 2 and 4 versions too. To ensure that it works, you can write console.log($) in ngOnInit block (for example).

You can do it simply by fetching the src js and importing it in your component.

Here is an example from a leaflet application I did :

package.json :

"leaflet.markercluster": "^1.1.0",
"leaflet-draw": "^0.4.12",

random1.component.ts : with markercluster library example

declare const L: any;
import 'leaflet.markercluster';

export function initMarkerCluster(map: L.Map, mapService: LeafletService) {
  // Set the ClusterMarkerLayer
  const cluster = L.markerClusterGroup();
  ...
}

random2.component.ts : with leaflet.draw library example

declare const L: any;
import 'leaflet-draw/dist/leaflet.draw-src';

export function drawPlugin(map: L.Map, mapService: LeafletService) {
  const drawnItems: L.FeatureGroup = L.featureGroup().addTo(map);
  const drawControl = initDrawControl(drawnItems);
  map.addControl(drawControl);
  ...
}

Note : In these leaflet libraries there was the namespace L for Leaflet so I declared a global variable, but you shouldn't need that.