Angular-cli bootstrap v3 и jquery? Angular 2.0

Question

Итак, я собираюсь начать проект, и я думаю, что Angular 2.0 кажется очень прочной основой для работы с: Маршрутизация, компоненты, директивы и т. Д. Однако есть много вещей, которые уже были построены с использованием bootstrap v3 и jQuery, что я хотел бы использовать. Мне было интересно, можно ли интегрировать bootstrap v3 и JQuery с помощью структуры, созданной Angular-cli?

Кстати, я видел другие угловые 2 семена, используя Gulp, но они всегда рекомендуют официальный Angular-cli.

Также я новичок в том, как на самом деле работает сборка существующей библиотеки JS в скриптрипте, и если $ global будет вмешиваться в машинопись.

Примечание: Я знаю, что ng2-bootstrap, но я не думаю, что все совместимо с этим подходом, поскольку оно не использует jquery как зависимость. Я также знаю, что использование jquery в угловых не является лучшей практикой, но я думаю, что есть некоторые случаи, в которых вам действительно нужно это для плагинов или зависимостей.

Answer 1

Я могу предложить вам обходное решение, пока не получит лучшую поддержку для сторонних библиотек. Он работал для меня :)

После ввода

npm install jquery 

и

typings install jquery --ambient --save 

В Вашем угловом-Cli-build.json, убедитесь, что он остается, как таким образом

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     ... 
     'jquery/**/*.js' 
    ] 
    }); 
}; 

и в вашей системе-config.ts:

/** Map relative paths to URLs. */ 
const map: any = { 
    'jquery': 'vendor/jquery' 
}; 

в вашем ЦСИ/index.html добавить эту строку

<script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script> 

теперь в вашем компоненте, где вы хотите использовать JQuery, записать этот путь

declare var $:any; 

@Component({ 
}) 
export class YourComponent { 
    ngOnInit() { 
    $.("button").click(function(){ 
     // now you can DO, what ever you want 
    }); 
    console.log(); 
    } 
} 

Я делаю это так, в моем проекте. Надеюсь, это может вам помочь :).