How to import or use external JS files and functions in my angular web application

Question

I want to integration external code (html, js and css files) into my angular web application.

in this external code, the HTML files is just like this:

index.html

<html>
<header>
</header>
<body>
</body>

 <script src="app/components/landing-page/js/bootstrap.min.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
  <script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script>
    /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
    initComparisons();
  </script>
<html>

as you see, there are several javascript files, and a funciton initComparisons() will be called.

If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.

I have googled some solutions, and I have change my angular.json file just like this:

 "scripts": [
              "src/app/components/landing-page/js/imageComparisonSlider.js",
              "src/app/components/landing-page/js/owl.carousel.min.js",
              "src/app/components/landing-page/js/cbpAnimatedHeader.js",
              "src/app/components/landing-page/js/theme-scripts.js"
            ]

and also import all js files in index.html in my angular web application

 <script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>

and in the component.ts, I also do this:

import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
    this.isLoggedIn = this.authService.isLoggedIn;
    initComparisons();
  }

I added some code in stackblitz; https://stackblitz.com/edit/angular-qowfwy?file=angular.json

but it was not working.

can somebody help me and give me some suggestion.

Best Regards,

Leo

If the answers given didn't help, could you maybe create a stackblitz which demonstrate the issue? — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Mar 28, 2019 at 15:12

rojaswilmer · Accepted Answer · 2019-03-28 15:08:00Z

1

If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.

answered Mar 28, 2019 at 15:08

rojaswilmer

1204 bronze badges

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

1 Comment

user1938143 Over a year ago

there is no problem after running ng build

mbojko · Accepted Answer · 2019-03-28 15:10:57Z

0

After putting the external scripts in angular.json (paths correct and everything), in component you should

declare const initComparisons;
// ...
ngOnInit() {
  initComparisons();
}

answered Mar 28, 2019 at 15:10

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

6 Comments

user1938143 Over a year ago

the pahts are correct, I run ng build and successfull.

user1938143 Over a year ago

why should use declare const?

mbojko Over a year ago

Because without it, TypeScript will object to using undeclared value initComparisons, I expect build errors.

user1938143 Over a year ago

but I have imported this function of external js file

user1938143 Over a year ago

yout mean; import { initComparisons } from './js/imageComparisonSlider.js'; declare const initComparisons;

|

Collectives™ on Stack Overflow

How to import or use external JS files and functions in my angular web application

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related