Search code examples
javascriptangularangular7stl-format

External JS Files Working in Angular 7 But Not in 8


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


Solution

  • 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.