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.