Сторонняя библиотека в Angular 2

Question

Я добавил в свой проект сторонний пакет (jquery, colorbox). Во-первых я установил бросок на НПМ и после того, как я добавил к "угловым-cli.json"

"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/jquery-colorbox/jquery.colorbox.js", .... 

и заявляю в компоненте,

declare var $:any; 
declare var colorbox:any; 
and the code 

ngAfterViewInit(){ 
    $(document).ready(function(){ 
     $(".alma1").colorbox({rel:'alma1'}); 
    }); 
} 

и вид

<a class="alma1" href="{‌{pic.pictureURL}}" title="{‌{pic.desc}}"> 
    <img class="alma" src="{‌{pic.pictureURL}}" alt="{‌{pic.desc}}">  
</a> 

Когда я нажимаю первый раз на ссылке, он переводит меня на страницу ссылок на хранилище Google Firebase и после того, как я вернусь на веб-страницу и снова нажмите ссылку, тогда пакет colorbox работает нормально. Я вызвал в ngAfterViewInit(), но выглядит, как будто не существует. Почему не работает в первый раз?

Answer 1

Вам необходимо использовать один загрузчик, чтобы передать вам jQuery lib вам угловой проект 2. а также вам нужно убедиться, что типы jquery доступны в вашем времени пересылки.

вы можете использовать загрузчик systemjs, а в системной конфигурации добавить jquery путь в конфигурацию, и ваш машинописный текст будет понимать jquery.

Если вы будете использовать загрузчик systemjs, он также будет доступен в браузере.