Have you heard about using Angular-cli to bootstrap with version 3 along with jQuery integration in Angular

Question

Have you heard about using Angular-cli to bootstrap with version 3 along with jQuery integration in Angular

As I prepare to embark on a new project, I am considering Angular 2.0 as a solid framework to utilize for its routing, components, and directives. However, there are existing elements built with Bootstrap v3 and jQuery that I would like to incorporate into my project. Is it possible to integrate Bootstrap v3 and jQuery within the structure created by Angular-cli?

I have noticed other Angular 2 seeds using Gulp, but they all seem to recommend the official Angular-cli instead.

Additionally, I am unfamiliar with how to introduce an existing JavaScript library into Typescript and whether or not jQuery's global $ will cause conflicts with Typescript.

Please note: While I am aware of ng2-bootstrap, I have concerns about compatibility since it does not rely on jQuery as a dependency. Also, I understand that using jQuery in Angular is not ideal practice, but there are instances where it may be necessary for plugins or dependencies.

jquery twitter-bootstrap typescript angular angular-cli

Answer 1

Answer №1

If you're looking for a temporary solution while waiting for better support of 3rd party libraries, I have a workaround that worked for me :)

First, run the following commands in your terminal:

npm install jquery

and

typings install jquery --ambient --save

In your angular-cli-build.json file, make sure it looks like this:

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

Then, in your system-config.ts file, add the following mapping:

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

Next, include the jQuery script in your src/index.html file:

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

Now, in the component where you want to use jQuery, declare it as follows:

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // Do whatever you need to do here
     });
     console.log();
  }
}

This approach has been successful for my project. Hopefully, it will also be beneficial for you :) .

Answer 2

If you're looking for a temporary solution while waiting for better support of 3rd party libraries, I have a workaround that worked for me :)

First, run the following commands in your terminal:

npm install jquery

and

typings install jquery --ambient --save

In your angular-cli-build.json file, make sure it looks like this:

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

Then, in your system-config.ts file, add the following mapping:

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

Next, include the jQuery script in your src/index.html file:

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

Now, in the component where you want to use jQuery, declare it as follows:

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // Do whatever you need to do here
     });
     console.log();
  }
}

This approach has been successful for my project. Hopefully, it will also be beneficial for you :) .

Have you heard about using Angular-cli to bootstrap with version 3 along with jQuery integration in Angular

Answer №1

Similar questions

What is the best method for incorporating dynamic page transitions when navigating between individual pages?

Develop a loading modal for all AJAX requests, with the exception of a specific one

Leveraging both chained 'done' and 'then' for numerous asynchronous operations

Looking for a button that can be toggled on and off depending on the input fields

'Mastering the implementation of promises in React context using TypeScript'

Encountering a NULL argument in an MVC controller when executing an Ajax post request

"Can you guide me on how to pick out one item before making my

Generate a new div element by simply tapping on a button

As the background image shifts, it gradually grows in size

What is the best way to update data upon clicking a link using ajax?

Struggling to convert a vb.net string into a json string through Serialization

Wordpress AJAX delivering empty response instead of intended string

Is JavaScript necessary for this task in PHP?

"Encountering a 500 error on Chrome and Internet Explorer while trying to sign

What is the best way to store information in JSON format and transmit it to a server using an API?

What is the best way to handle multiple requests to the same URL in Cypress while waiting?

Issue with CakePHP 3: The $this->set method is not returning any response data following a POST

Preventing the addition of hash tags to the URL by the anything slider

A guide to implementing Bootstrap 4's toolchain for customized downstream applications

Angular 7's URL updates, but no other actions take place