将jQuery插件添加到angular应用

Question

Frameworks used

1. Angular: 5.2.3
2. 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.

Answer 1

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.$ = $;