SpreadJS not working in Webpack based angular application

I am trying to add the spreadjs library to my Angular 5 application. I am following the tutorial given in this link. https://www.grapecity.com/en/blogs/spread-sheets-and-angular But one difference is there between the tutorial and my application. My app is using webpack.

When I am trying to run the application I am getting the following error

Uncaught ReferenceError: GC is not defined at Object. (gc.spread.sheets.angular.11.0.4.js:106) at webpack_require (bootstrap 05add16ed08b4def07f8:657) at fn (bootstrap 05add16ed08b4def07f8:85) at Object. (app.module.browser.ts:21) at webpack_require (bootstrap 05add16ed08b4def07f8:657) at fn (bootstrap 05add16ed08b4def07f8:85) at Object. (index.js:4) at webpack_require (bootstrap 05add16ed08b4def07f8:657) at fn (bootstrap 05add16ed08b4def07f8:85) at Object.options.path (html5-entities.js:190) (anonymous) @ gc.spread.sheets.angular.11.0.4.js:106 webpack_require @ bootstrap 05add16ed08b4def07f8:657 fn @ bootstrap 05add16ed08b4def07f8:85 (anonymous) @ app.module.browser.ts:21 webpack_require @ bootstrap 05add16ed08b4def07f8:657 fn @ bootstrap 05add16ed08b4def07f8:85 (anonymous) @ index.js:4 webpack_require @ bootstrap 05add16ed08b4def07f8:657 fn @ bootstrap 05add16ed08b4def07f8:85 options.path @ html5-entities.js:190 webpack_require @ bootstrap 05add16ed08b4def07f8:657 fn @ bootstrap 05add16ed08b4def07f8:85 decorate @ main-client.js?v=m6MAq5LYDxHuj3aQ3FLsDASzSdE0PXrpCFP8K7zsieI:4472 __webpack_require @ bootstrap 05add16ed08b4def07f8:657 module.exports @ bootstrap 05add16ed08b4def07f8:706 (anonymous) @ bootstrap 05add16ed08b4def07f8:706

I tried adding the javascript link to webpack.config.vendor.js. My backend is .net core webapi. Please advice me what to do next

Solution

EDIT

This is likely the result of not importing some required scripts in the angular.json file. This is a step that the default SpreadJS instructions GrapeCity's website (https://www.grapecity.com/en/blogs/spread-sheets-and-angular) are lacking for current Angular applications.

I found this missing step on one of GrapeCity's Angular/SpreadJS blogs (https://www.grapecity.com/en/blogs/create-angular-spreadsheets-with-angular-cli) , which was a little hidden on their site.

The step you need is:

angular.json:

{
  (…)
  "apps": [
    {
      (…)
      "styles": [
        "./lib/gc.spread.sheets.excel2013darkGray.11.0.0.css"
      ],
      "scripts": [
        "./lib/gc.spread.sheets.all.11.0.0.min.js"
      ],
      (…)
    }
  ],
  (…)
}

Change the filepath to wherever you placed your SpreadJS files. Note that at least in my app, my angular.json files has two styles arrays and two scripts arrays - insert these references into the top set (the styles and scripts array closest to the top of the angular.json file).