using external JS libraries in my angular 2 project

by

If you use angular-cli, you can add all your external JS files in assets folder. And then in angular-cli.json add them: 

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/moment/moment.js",
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js",
        "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js",
        "./assets/js/slimscroll.min.js",
        "./assets/js/inspinia.js",
        "./assets/js/metisMenu.js",
        "./assets/js/footable.all.min.js"
      ]

You can do it also with external styles: 

"styles": [
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css",
        "./assets/scss/plugins/footable/footable.core.css",
        "./assets/scss/style.scss"
      ]

And of course you are right, then you need to add in typings.d.ts: 

declare var PrayTimes:any;
declare var System: any;
declare var $: any;
declare var moment: any;
declare var Chart: any;

More Related Contents:

  1. How do I return the response from an Observable/http/async call in angular?
  2. How to load external scripts dynamically in Angular?
  3. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  4. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  5. Angular 2: How to detect changes in an array? (@input property)
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Wait for multiple promises to finish
  8. Angular 2 router event listener
  9. Angular2 component’s “this” is undefined when executing callback function
  10. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  11. Load existing components dynamically Angular 2 Final Release
  12. Angular 5 Scroll to top on every Route click
  13. How to handle window scroll event in Angular 4?
  14. Prevent IE11 caching GET call in Angular 2
  15. Nested arrays in Angular 2 reactive forms?
  16. Page is part of the declarations of 2 modules: Error in ionic build prod
  17. Angular: In which lifecycle hook is input data available to the Component
  18. Angular 2 Component @Input not working
  19. Angular 4 Filter Search Custom Pipe
  20. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  21. Angular 2 typescript invoke javascript function
  22. Whats the difference between using a class and interface?
  23. What does Angular 2 hashtags in template mean?
  24. Angular 2 + Ionic 2: Detect if an object was modified
  25. Converting an image to base64 in angular 2
  26. Angular 6: ERROR TypeError: “… is not a function” – but it is
  27. Angular interceptor exclude specific urls
  28. How to iterate using ngFor loop Map containing key as string and values as map iteration
  29. How to check empty object in angular 2 template using *ngIf
  30. Filter Array in Array by date between 2 dates

Leave a Comment