angular-cli选择了jquery

Question

part of angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/bootstrap-daterangepicker/daterangepicker.css",
    "../node_modules/bootstrap-chosen/bootstrap-chosen.css"
],
"scripts": [
    "../node_modules/hammerjs/hammer.min.js",
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-chosen/dist/chosen.jquery-1.4.2/chosen.jquery.js"
  ],

blaBla.component.html

<div class="col-lg-3">
    <select appChosen multiple data-placeholder="Choose a Country" class="chosen chzn-done" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
    </select>
</div>

blaBla.directive.ts

import { Directive, ElementRef } from '@angular/core';
import * as $ from 'jquery';

@Directive({
    selector: '[appChosen]'
})
export class ChosenDirective {

    constructor(private el: ElementRef) {}
    ngAfterViewInit() {
        $(this.el.nativeElement).chosen({ allow_single_deselect: true });
    }
}

chosen doesn't work error in console:

__WEBPACK_IMPORTED_MODULE_1_jquery__(...).chosen is not a function

but $('.chosen').chosen(); works in chrome dev tools.

How can this be fixed?

Answer 1

i find solution here https://github.com/angular/angular-cli/issues/2760

thanks to twmobius

so here it is: angular-cli.json

"scripts": [
    "../vendor.ts"
  ],

vendor.ts

import * as $ from 'jquery';
window['$'] = window['jQuery'] = $;
require('./node_modules/chosen-js/chosen.jquery.js');