Import 3rd party javascript libraries in Angular single components

问题

I'm currently developing an Angular4 application and I want to import some javascript libraries but just for a single component. Currently I can easily import this libraries by defining their paths inside .angular-cli.json like that:

{
   "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/jqueryui/jquery-ui.js",
      "../src/assets/js/jquery/cometd/org-cometd.js",
      "../src/assets/js/jquery/cometd/jquery.cometd.js",
   ],
   ...
}

However, the mentioned scripts will be imported for all the application. Is there a way to import them just for a specific component ? I've tried to import them inside the component like shown below but without success.

import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
...
import "../../../../../node_modules/jquery/dist/jquery.min.js";
import "../../../../../node_modules/jqueryui/jquery-ui.js";
import "../../../../assets/js/jquery/cometd/org-cometd.js";
import "../../../../assets/js/jquery/cometd/jquery.cometd.js";

@Component({
   selector: '...',
   templateUrl: '...',
   styleUrls: '...',
   encapsulation: ViewEncapsulation.None
})

export class MyComponent implements OnInit {
   ...
}

[UPDATE] - I forgot to mention that I am currently using the ViewEncapsulation.None to be able to apply the styles from some css files into the component. Not sure if this detail can be related with the issue.

回答1:

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).

回答2:

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
}

回答3:

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.

来源：https://stackoverflow.com/questions/48173259/import-3rd-party-javascript-libraries-in-angular-single-components

标签

angular

typescript

angular-components

angular2-components