Angular-cli bootstrap v3 and 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.

Did you try this one? github.com/jamesemann/ng2-vscode-template — Sanket
– Sanket, Commented Jun 10, 2016 at 7:54

pd farhad · Accepted Answer · 2016-06-10 08:25:41Z

6

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 :) .

answered Jun 10, 2016 at 8:25

pd farhad

6,4523 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Mr.Moe Over a year ago

for me it stops at your typings install jquery --ambient --save it just throws the following error: ` Unable to find "jquery" ("npm") in the registry. Did you want to try searching another source?` I googled it but couldn't find anything interesting. Any suggestion?

pd farhad Over a year ago

Do you have your typings install globally ?

Mr.Moe Over a year ago

yes i do. But thanks for the noob security effort ;)

pd farhad Over a year ago

npm install jquery --save then try again

Mr.Moe Over a year ago

yes. I can include the scripts the way it is descripted but I dont seem to get the reason why i need to include it into the map in the system-config.ts thanks for your effort so far :)

|

Collectives™ on Stack Overflow

Angular-cli bootstrap v3 and jquery? Angular 2.0

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related