Angular-cli bootstrap v3和jquery？ Angular 2.0

Question

So I am about to start a project and I think Angular 2.0 seems a very solid framework to work with: Routing, components, directives, etc. However, there are many stuff already built using bootstrap v3 and jQuery that I would like to use. I was wondering if it is possible to integrate bootstrap v3 and JQuery using the structure made by Angular-cli?

By the way I've seen other Angular 2 seeds using Gulp, but they always recommend the official Angular-cli instead.

Also I am new on how brining an existing JS library into Typescript actually works and if jquery's $ global will interfere with typescript.

Note: I am aware of ng2-bootstrap, but I don't think that everything is compatible with this approach since it doesn't use jquery as dependency. I am also aware that using jquery in angular is not the best practice, but I think there are some cases in which you really need it for plugins or dependencies.

Answer 1

I can suggest you a workaround until they get better support for 3rd party libs. It worked for me :)

After typing

npm install jquery 

and

 typings install jquery --ambient --save

In your angular-cli-build.json , make sure it remains like this way

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

and in your system-config.ts:

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

in your src/index.html add this line

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

now in your component where you want to use jquery , write this way

declare var $:any;

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

I am doing it this way, in my project. Hope It might help you :) .