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!