kuerbi kuerbi - 1 year ago 139
TypeScript Question

How to use vendor.ts from https://angular.io/docs/ts/latest/guide/webpack.html

According to https://angular.io/docs/ts/latest/guide/webpack.html you should be able to add vendors like jquery in the vendor.ts file

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

what i have done so far

typings install dt~jquery --global --save
npm install jquery --save

and i added this line to vendor.ts

import 'jquery'

webpack run without an error. But I am not able to use jQuery in my Component.

import { Component, OnInit, ElementRef } from '@angular/core';

selector: 'table-widget',
templateUrl: 'table-widget.component.html'

export class TableWidgetComponent implements OnInit {

constructor(private _elRef: ElementRef) {


ngOnInit() : void {
$(this._elRef.nativeElement).find('button').on('click', function() { alert("it works"); });

what am i doing wrong here?

Answer Source

You need to expose the jQuery to the global context.

Either of these options will achieve what you need to do.

In your webpack config:

plugins: [
    ....  //your other configs
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'

Or using expose-loader

module: {
  loaders: [
      { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download