Adding jQuery plugin to angular app

Question

Frameworks used

Angular: 5.2.3
Foundation(Zurb): 6.2.4

Created an angular app using

> ng new foundation-plugin-app --style=sass
> cd foundation-plugin-app
> npm install foundation-sites --save

Everything work as expected till this.
Then I added foundation-datepicker

> npm install foundation-datepicker --save

This is how the plugin is initialized.

$('#scenario_start_date').fdatepicker({
  initialDate: '02-12-1989',
  format: 'mm-dd-yyyy',
  disableDblClickSelection: true,
  leftArrow: '<<',
  rightArrow: '>>',
  closeIcon: 'X',
  closeButton: true
});

Now, to make it work, followed these steps 1.Added styleUrls in app.component.ts

styleUrls: [
    // ...,
    '../../node_modules/foundation-datepicker/scss/foundation-datepicker.scss'    ]

2.Added scripts in angular-cli.json

"scripts": [
    "node_modules/foundation-datepicker/js/foundation-datepicker.js"
]

3.Added typings to app.component.ts

npm install --save-dev @types/jquery

and imported jquery and foundation-datepicker plugin to the page

import * as $ from 'jquery';
import 'foundation-datepicker';

4.Lastly, called the plugin in ngOnInit() of app.component.ts

$('#scenario_start_date').fdatepicker(/*...*/);

Which gave error as

fdatepicker is not defined. So I type-casted it as

(<any>$('#scenario_start_date')).fdatepicker(/*...*/);

to suppress the error.

This gives a new error

Uncaught TypeError: Cannot read property 'fn' of undefined

at eval (webpack-internal:///../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
at eval (webpack-internal:///../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
at Object.../../../../foundation-datepicker/js/foundation-datepicker.min.js (vendor.bundle.js:36)
at __ webpack_require __ (inline.bundle.js:55)
at eval (webpack-internal:///../../../../../src/app/app.component.ts:15)
at Object.../../../../../src/app/app.component.ts (main.bundle.js:21)
at __ webpack_require __ (inline.bundle.js:55)
at eval (webpack-internal:///../../../../../src/app/app.module.ts:11)
at Object.../../../../../src/app/app.module.ts (main.bundle.js:29)
at __ webpack_require __ (inline.bundle.js:55)

What am I doing wrong with the code? Any pointers will be helpful.

I think you've forgotten to include JQuery.js to angular-cli.json. — Abbas Amiri
– Abbas Amiri, Commented Feb 5, 2018 at 14:52
@abbas amiri: no. It's added as a dependency. Foundation needs it. Also $("#scenario_start_date") is working when I console.log it. — codeandcloud
– codeandcloud, Commented Feb 5, 2018 at 15:22
well, I did exactly what you did, except I added jquery and it works for me. — Abbas Amiri
– Abbas Amiri, Commented Feb 5, 2018 at 15:27

score 2 · Accepted Answer · 2018-02-26 05:48:47Z

2

Your import statement seems to be wrong.

Please try import $ from 'jquery';

And make sure that jQuery is bundled with your generated bundle file.

In your case it is either not globally exported or not included in the window context.

In this case try

window.jQuery = $;
window.$ = $;

edited Feb 26, 2018 at 5:48

answered Feb 25, 2018 at 14:22

user753676

Sign up to request clarification or add additional context in comments.

3 Comments

user753676 Over a year ago

Why would this not be an answer? jQuery is undefined in his case because his import is wrong.

burnt1ce Over a year ago

Your solution didn't work for me but this solution worked for me stackoverflow.com/a/50020329/89605

user753676 Over a year ago

This is TypeScript related and a different problem imo.

Collectives™ on Stack Overflow

Adding jQuery plugin to angular app

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related