SpreadJS not working in Webpack based angular application

Question

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

Kyle Vassella · Accepted Answer · 2018-07-27T19:32:28.617

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

SpreadJS not working in Webpack based angular application

1 Answers1