Добавление плагина jQuery в приложение angular

Используемые фреймворки

1. Угловой: 5.2.3
2. Фонд(Зурб): 6.2.4

Создал угловое приложение, используя

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

До этого все работало как положено.
Затем я добавил foundation-datepicker.

> npm install foundation-datepicker --save

Вот как инициализируется плагин.

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

Теперь, чтобы заставить его работать, выполните следующие действия: 1.Добавил styleUrls в app.component.ts

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

2.Добавлено scripts в angular-cli.json

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

3.Добавлено typings в app.component.ts

npm install --save-dev @types/jquery

и импортировал jquery и foundation-datepicker плагин на страницу

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

4.Наконец, назвал плагин в ngOnInit() из app.component.ts

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

Что дало ошибку как

fdatepicker не определено. Поэтому я набрал его как

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

чтобы подавить ошибку.

Это дает новую ошибку

Uncaught TypeError: невозможно прочитать свойство «fn» неопределенного

на eval (webpack-internal:///../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
на eval (webpack-internal:// /../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
в объекте.../../../../foundation-datepicker /js/foundation-datepicker.min.js (vendor.bundle.js:36)
в __ webpack_require __ (inline.bundle.js:55)
в eval (webpack-internal:///.. /../../../../src/app/app.component.ts:15)
в Object.../../../../../src/app/ app.component.ts (main.bundle.js:21)
в __ webpack_require __ (inline.bundle.js:55)
в eval (webpack-internal:///../../. ./../../src/app/app.module.ts:11)
в Object.../../../../../src/app/app.module.ts (main.bundle.js:29)
в __ webpack_require __ (inline.bundle.js:55)

Что я делаю не так с кодом? Любые указатели будут полезны.