Mediator Mediator - 1 year ago 158
Javascript Question

How use js library with jquery on angular2 (typescript)?

I try migrate angular js to angularjs2 with typescript.

I can't understand how use js library.
I have main app.component where I want initialize some library, for example simple row:


and initialize by
attribute data-spy="scroll" data-target="#header-navbar" data-offset="51"


<body data-spy="scroll" data-target="#header-navbar" data-offset="51" class="pace-done">

<pm-app>Loading App...</pm-app>

<!-- ================== BEGIN BASE JS ================== -->
<script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="assets/crossbrowserjs/html5shiv.js"></script>
<script src="assets/crossbrowserjs/respond.min.js"></script>
<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="assets/plugins/scrollMonitor/scrollMonitor.js"></script>
<script src="assets/js/landing-apps.js"></script>

<!-- ================== BEGIN BASE JS ================== -->
<script src="assets/plugins/pace/pace.min.js"></script>
<!-- ================== END BASE JS ================== -->
<!-- ================== END BASE JS ================== -->
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/"></script>

<!-- Required for http -->
<script src="node_modules/angular2/bundles/"></script>

<!-- Required for routing -->
<script src="node_modules/angular2/bundles/"></script>

<!-- 2. Configure SystemJS -->
packages: {
app: {
format: 'register',
defaultExtension: 'js'
.then(null, console.error.bind(console));


general main.ts

import { bootstrap } from 'angular2/platform/browser';

// Our main component
import { AppComponent } from './app.component';


and empty app.component.

Answer Source

In order to use jQuery you firstly you have to import in the index.html, than you can initialize your code in the constructor of component


in case IDE shows error than you can declare $ of any type at the top of the class like this :-

...some  code here 
declare var $ : any;

export class App{
..///code goes here

see also may help you

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download