$(...) pivot is not a function in jquery + angular 4 + webpack Compiled successfully

[vaibhav2018]

index.html

pivot.component.html

pivot.component.ts

angular-cli.json

package.json

webpack compiled successfully

localhost:4200/pivot

app.component.ts

import { Component } from '@angular/core';
import * as $ from 'jquery';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

app.component.html

I was able to follow some steps to achieve this but still getting error.
Not sure how it can be solved.
Please help guys.

[nicolaskruchten]

Posting screenshots of code makes it almost impossible to help you. Can you post a minimal repo or something so that someone can try to execute the code you're wanting help with?

[FloPrey]

We had a similar issue and we had to set jquery to global scope in webpack.

We added this to the config.modules:
{ test: require.resolve('jquery'), loader: 'expose-loader?jQuery' }

Also we imported jquery different:
import jQuery from 'jquery';
and than
const pivotElement = jQuery(element[0]);
pivotElement.pivotUI();

[Arezoo-Bozorgmehr]

Hey guys,

i am not professional in Angular, but I have a project in angular and need in this case a pivot table. This module unfortionattly is for angularjs and i`m working with angular 4. Could you help me please, how can I make this for my ptoject.

[FloPrey]

Hi,

actually this project just uses jquery and not angularjs.
So for using it, you have to import jquery and jquery-ui and the pivot table should work no matter if you use angularjs or angular 4.

[vaibhav2018]

@FloPrey already imported jquery and jquery-ui
@Arezoo-Bozorgmehr this is working in angular 4 also just some proper setup needed
As of now working
Steps:

1. removed import * as $ from jquery from pivot.component
2. added declare var $ : any in pivot.component
3. if you are using any google charts, d3, make sure it is available in angular-cli.json in scripts
   "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/jquery-ui-dist/jquery-ui.js",
   "../node_modules/pivottable/dist/pivot.min.js",
   "../node_modules/pivottable/dist/d3_renderers.min.js",
   "../node_modules/pivottable/dist/gchart_renderers.min.js"
   ]
4. added import 'jquery-ui'; in pivot.component

[vaibhav2018]

should we close this issue?

[nicolaskruchten]

If your needs are met yes we can close this issue. Note that there is a long discussion of Angular integration here: #208

[abdelwahebmoalla]

@vaibhav2018
I added "../node_modules/pivottable/dist/gchart_renderers.min.js" and I added
script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> in index.html
but I still get TypeError: Cannot read property 'arrayToDataTable' of undefined when I choose line chart
what am i missing or doing wrong ?