Angular 2中的第三方库

Question

I added a third-party package (jquery, colorbox) to my project. First I installed throw on npm and after I added to the "angular-cli.json"

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

and I declare in the component,

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

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

and the view

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

When I click first time on the link it takes me to the google firebase storage link page and after when I go back to the web page and click again on the link then the colorbox package working fine. I called in the ngAfterViewInit(), but is look likes not exist. Why is not working at the first time?

Answer 1

You need to use one loader to pass your jQuery lib to you angular 2 project. and also you need to make sure that jquery types are available in your transpile time.

you can use systemjs loader and in system config add jquery path in you config and your typescript will understand jquery.

if you will use systemjs loader, it will also available in the browser.