How to add a Javascript library to Angular 4 component?

Question

I am trying to figure out how to import JavaScript files ONLY to a specific component.

I put the following code directly into my component:

import "../../vendor/datatables/js/jquery.dataTables.min.js";
import "../../vendor/datatables-plugins/dataTables.bootstrap.min.js";
import "../../vendor/datatables-responsive/dataTables.responsive.js";

But it fires an error saying:

Module not found: Error: Can't resolve 'jquery' in...

Which makes me suspect that the files that depend on jQuery cannot find the jQuery library in this scope.

jQuery itself is put in the angular-cli.json file:

"scripts": [
    "./vendor/jquery/jquery.min.js"
],

An alternative is to put all of those 3 external JS files into the angular-cli.json file as well, and it will work, showing the expected result from the user perspective.

But I would like to figure out how to avoid setting the JS globally for those that are used only in a few specific components.

Thanks, please advise.

Answer 1

For example, to import jQuery to your component, you should write:

import * as $ from 'jquery';

Which means "Import all and use as "$" from "jQuery"".

If you downloaded the library by yourself, without npm install, you can try the following (but I'm not sure that it will work):

import * as $ from 'path/to/jquery';