Recently I was requested to integrate a software that I had never heard of into a very robust Angular project that works with an API. Unfortunately, regardless of how much documentation Stimulsoft has, I could not figure out why the Stimulsoft Designer would not load in my project. It had appeared that I had done everything right, but alas – nothing was working.
I was facing two major errors and neither of them made sense since the files were most definitely included in the file structure and being called in properly (or so I thought).
The errors were as follows:
“Uncaught Type Error: Cannot read property ‘StiComponent’ of Undefined”
“Uncaught Type Error: Cannot read property ‘StiDesignerOptions’ of Undefined”
This simply came down to the load order of the JavaScript files in my angular-cli.json file.
The original scripts load order that was causing the error looked like this:
"scripts": [ "src/lib/stimulsoft/stimulsoft.reports.js", "src/lib/stimulsoft/stimulsoft.designer.js" "src/lib/stimulsoft/stimulsoft.viewer.js", ]
The correct load order for these scripts is this:
"scripts": [ "src/lib/stimulsoft/stimulsoft.reports.js", "src/lib/stimulsoft/stimulsoft.viewer.js", "src/lib/stimulsoft/stimulsoft.designer.js" ]
Super simple and easy to miss, yet I found nothing in the Stimulsoft documentation noting that they needed to be loaded in that order. So, if you’re working through and run across the errors I did, I hope this helps!