Angular2 How to use third-party libraries (jquery, etc.)

On the internet to find a lot of textbooks are not search for this part of the type, self-test to write the tutorial.
Scenario Description: The project needs to use bootstrap, it is well known that Bootstrap has no time-date control, need to use a third-party control, I am afraid of how to use third-party controls in Angular2, my project uses ANGULAR-CLI build.
Resolution 1: Configure Package.json to add a new dependency, then update to download the new library

  
 

   
  

  
 "jquery":"*",
   
  

  
 "tether":"*",
   
  

  
 "bootstrap":"*",
   
  

  
 "moment":"*",
   
  

  
 "eonasdan-bootstrap-datetimepicker":"*"
  
 

2: Configure Angular-cli.json

  
 

   
  

  
 "styles": [
   
  

  
 "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   
  

  
 "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
   
  

  
 "styles.css"
   
  

  
 ],
   
  

  
 "scripts": [
   
  

  
 "../node_modules/jquery/dist/jquery.min.js",
   
  

  
 "../node_modules/tether/dist/js/tether.min.js",
   
  

  
 "../node_modules/bootstrap/dist/js/bootstrap.min.js",
   
  

  
 "../node_modules/moment/min/moment.min.js",
   
  

  
 "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
   
  

  
 ],
  
 

3: Using the Datatimepicker plugin in the stencil

  
 

   
  

  
<div class="container">
   
  

  
 <div class="row">
   
  

  
 <div class=‘col-sm-6‘>
   
  

  
 <div class="form-group">
   
  

  
 <div class=‘input-group date‘ id=‘datetimepicker1‘>
   
  

  
 <input type=‘text‘ class="form-control" />
   
  

  
 <span class="input-group-addon">
   
  

  
 <span class="glyphicon glyphicon-calendar"></span>
   
  

  
 </span>
   
  

  
 </div>
   
  

  
 </div>
   
  

  
 </div>
   
  

  
 </div>
   
  

  
</div>
  
 

4: Instantiating the component in an assembly

  
 

   
  

  
declare var $:any;
   
  

  
@Component({
   
  

  
 selector:"app-root",
   
  

  
 templateUrl:"bootstrap.template.html"
   
  

  
})
   
  

  
export class BootstrapComponent extends OnInit{
   
  

  
 ngOnInit(): void {
   
  

  
 $(function () {
   
  

  
 $(‘#datetimepicker1‘).datetimepicker();
   
  

  
 });
   
  

  
 }
   
  

  

   
  

  
}
  
 

Note here that you need to declare the $ variable, if you use jquery then declare the jquery variable, if you do not declare, console will have a hint error, the statement here why it works I am not very clear, perhaps similar to the role of D.ts.


From for notes (Wiz)

Angular2 How to use third-party libraries (jquery, etc.)