Плагины Angular-cli и jQuery

Я пытаюсь использовать некоторые плагины jQuery в своем приложении angular2, созданном с угловым кли.Плагины Angular-cli и jQuery

Как описано в документе, я установил библиотеки, которые мне нужны, с использованием npm и, при наличии, типов. Затем я добавил стили и скрипты в angular-cli.json, и если я открою хром-отладчик, я вижу, что библиотеки правильно загружены.

Проблема в том, что каждый раз, когда я пытаюсь использовать любой плагин jQuery, я всегда получаю js-ошибку в консоли, которая говорит, что «метод не является функцией».

Я создал небольшой пример с использованием jQuery и fullcalendar, и он можно отделить от этого репо GitHub.

https://github.com/vmilitello/jquery-plugin

Примечание: проблема существует только с JQuery плагинов, которые необходимы селектор для запуска (например, $("#myItem").fullcalendar() или $(".foo").steps()). Если вы используете библиотеки типа Sweetalert, проблема не возникает.

Уверен, что у меня что-то не хватает, но я действительно не могу понять, что это такое!

спасибо.

источник

2016-11-08 MilitelloVinx

Установить (если вы не сделали)

npm install @types/jquery --save-dev

Вы должны написать руководство типирование для вашего плагина.

Создать структуру:

/custom_typings 
/fullcalendar 
    /index.d.ts

чем в index.d.ts что-то вроде:

interface JQuery { 
    fullCalendar(options?: any): JQuery; 
}

чем в tsconfig.json

"typeRoots": [ 
    "../node_modules/@types", 
    "../custom_typings" 
]

источник

2016-11-08 08:46:44

Моя проблема не с типами. Что вы предлагаете, просто позвольте мне избежать использования jQuery-селектора, пока я пишу свой файл машинописных файлов. В основном вместо ( $ ("# calendar")). Fullcalendar() ;, я могу написать $ ("# calendar"). Fullcalendar() ;. Но это едва ли связано с моим вопросом. Я обновил ветку на GitHub, чтобы продемонстрировать, что это решение не работает. В любом случае, спасибо. – MilitelloVinx

Назовите свой типизирующий файл index.d.ts, а не index.ts, а функция jQuery - это не полный календар, это fullCalendar, я попробовал его на вашем репо и работает –

Спасибо! Я действительно играл с некоторыми парнями на gitter.im, и мы тоже нашли проблему. Спасибо за обновление ветки! Ценить это. Я оставлю филиал в надежде, что он может помочь кому-то другому. Благодаря! – MilitelloVinx

Все правильно, кроме одной детали без который он не работает. Как упоминалось here в последней части, вы должны иметь в своем компоненте

declare var $:any

Тогда $ будут глобальными и будут видеть функцию fullCalendar(), в противном случае она не работает для меня.

источник

2017-10-12 07:39:35

Плагины Angular-cli и jQuery

ответ

Смежные вопросы