在角度应用程序中导入 SpreadJS Charting 库的正确方法答案

【问题标题】：Correct way to import SpreadJS Charting library in an angular application在角度应用程序中导入 SpreadJS Charting 库的正确方法
【发布时间】：2019-06-12 18:10:39
【问题描述】：

我正在尝试在我的 Angular 应用程序中导入 SpreadJS 图表库，但无论我尝试哪些选项，我都没有得到结果。然而，一位同事使用相同的代码和设置，能够正确使用图表。

我们使用的版本是：

    "@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",

通过 NPM 模块安装。

我们还尝试了以下指南，但它似乎已经过时并且不适合我们： https://www.grapecity.com/en/blogs/create-angular-spreadsheets-with-angular-cli

我们在组件中使用它们的方式是像这样导入它们：

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

当我调用sheet.charts.clear(); 时，我收到以下错误消息： Cannot read property 'clear' of undefined（假设 sheet 是一个变量，包含对 spreadjs 表的引用）。我的同事使用相同的代码没有任何问题，并且图表非常适合他。

还有什么我们应该尝试的建议吗？

【问题讨论】：

第一。如果您使用angular.json 来导入index.html 的脚本，那么您不必在组件中导入您的库（这种方法通常在使用未拆分为模块的旧库时使用）。如果您在 StackBlitz 中为我们提供一些小的工作示例，那就太好了
我终于弄清楚这个问题是由package-lock.json引起的。我删除了这个文件和 node_modules，它开始“神奇地”工作
@Narshe 写这个作为答案，我会赞成。我目前正在仔细研究 SpreadJS。
@SQLGeorge 完成

标签： angular spreadjs

【解决方案1】：

发生这种情况的原因是我们package-lock.json 中的每个模块都有不同的版本。

为了修复它，我们简单地删除了 package-lock.json 和 node-modules 文件夹。再次运行npm install 后，一切开始正常。只需确保package.json 还包含每个模块的相同版本。

【讨论】：