Search code examples
angularspreadjs

Correct way to import SpreadJS Charting library in an angular application

I'm trying to import the SpreadJS charting library in my angular application but no matter the options I try I never get results. A colleague, however, using the same code and setup, is able to use the charts correctly.

The versions we're using are:

    "@grapecity/spread-excelio": "^12.0.9",
    "@grapecity/spread-sheets": "^12.0.9",
    "@grapecity/spread-sheets-angular": "^12.0.9",
    "@grapecity/spread-sheets-charts": "^12.0.9",

installed via NPM modules.

We also tries the following guide but it seems out of date and doesn't work for us: https://www.grapecity.com/en/blogs/create-angular-spreadsheets-with-angular-cli

The way we use them in the components is by importing them like this:

import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-charts';

When I call sheet.charts.clear(); I get the following error message: Cannot read property 'clear' of undefined (assume sheet is a variable holding a reference to a spreadjs sheet). My colleague has no issues with the same code and the charts load perfectly for him.

Any suggestions in what else we should try?

Solution

  • The reason why this was happening to us is that we had different versions for each module in our package-lock.json.

    In order to fix it, we simply deleted the package-lock.json and the node-modules folder. After running npm install again, everything started to work fine. Just make sure that the package.json also contains the same version for each of the modules.