External JS Files Working in Angular 7 But Not in 8

Question

I'm trying to run these viewstl javascript files in an Angular 8 application. I've run it successfully in an Angular 6 and 7 application by doing the following basics:

• Copied the .js files to the application, keeping the web worker files ( load_stl.min.js and parser.min.js ) in the root directory and the rest of the files in assets/scripts .

• Add the .js files to my scripts array in angular.json in this working order

  "scripts": [ "src/assets/scripts/three.min.js", "src/assets/scripts/webgl_detector.js", "src/assets/scripts/Projector.js", "src/assets/scripts/CanvasRenderer.js", "src/assets/scripts/OrbitControls.js", "src/assets/scripts/stl_viewer.min.js" ]

• Added the necessary code to the template:

  html <div id="stl_container"></div>

• Lastly referencing stl_viewer.min.js from the component:

   declare var StlViewer:any; var stl_viewer = new StlViewer(document.getElementById('stl_container'), { models: [ {id:0, filename:"assets/_somefile.stl"} ] });

As I mentioned, it works fine in Angular 6 but when running from Angular 8 I get the error as soon as the javascript is initialized from the component - and I don't understand why.

GET http://localhost:4300/load_stl.min.js 404 (Not Found)

I'm not necessarily sure if the version difference could be the problem

Answer 1

It turns out there is an extra property on the StlViewer class called load_three_files which takes the path to all the javascript files as argument.

Moving parser.min and load_stl.min to the assets/script folder and adding load_three_files: "assets/scripts/" to StlViewer fixed it.