Lets create a new Angular cli project
ng new PROJECT_NAME cd PROJECT_NAME
Using NPM
1. Install JQuery via NPMnpm install jquery --save npm install --save-dev @types/jquery
Current Jquery Version 3.2.1 requires minimum Typescript version of 2.3.4 so check the package.json file and change version numbers if its necessary.
 |
| TypeScript version number in the package.json |
2. Install Underscore JS via NPM
npm install underscore --save npm install --save @types/underscore
3. Setup environment
If you open the node_modules directory locate inside the project, you will find there is folder called jquery and underscore, refer the below pictures
 |
| Node Modules directory |
 |
| jquery folder |
 |
| Undersocre folder |
Open jquery folder then goto dist folder in here you can find the JQuery js file which is stored as jquery.js or the minified version jquery.min.js, Undersocre's JS file will be locate in the undersocre folder I hope you can find it. Now open the .angular-cli.json file locate in the root of the project
 |
| angular-cli.json file |
 |
| angular-cli.json file's script section after edit |
4. Using the Jquery and Underscore in a component
Open the app.component.ts file which locate in the app folder. and import the Jquery and the underscore
import * as jQuery from 'jquery'; import * as _ from 'underscore';
Create a constructor and type the below code
constructor(){
var debounced = _.debounce(function () {
alert("Working");
}, 400);
$(document).ready(function () {
debounced();
});
}
Final app.component.ts
import { Component } from '@angular/core';
import * as jQuery from 'jquery';
import * as _ from 'underscore';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
constructor(){
var debounced = _.debounce(function () {
alert("Working");
}, 400);
$(document).ready(function () {
debounced();
});
}
}
Thats it for the Using NPM part, lets take look at the without NPM part
Without NPM
1. Include Jquery and the Underscore JS CDN in the index.html file's head section.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
Full code for index.html file
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ex8</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <style> body{ padding:30px; } </style> </head> <body> <app-root>Loading...</app-root> </body> </html>
2. Writing Jquery and Underscore code in a component file
Open app.component.ts file which locate in the app folder. Next we need declare some variables to use Jquery code and the Underscore, other wise typescript file will not compile because for example Jquery code will always begin with the $ character but $ is not identified by the TypeScript compiler.
Add this code to the app.component.ts after the imports.
declare var jquery:any; declare var $ :any; declare var _:any;
Now create a constructor and add this code
constructor(){
var debounced = _.debounce(function () {
alert("Working");
}, 400);
$(document).ready(function () {
debounced();
});
}
Full code for the app.component.ts
import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;
declare var _:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
constructor(){
var debounced = _.debounce(function () {
alert("Working");
}, 400);
$(document).ready(function () {
debounced();
});
}
}
That's it.
