typescript 找不到模块“chart.js”

Cannot find module 'chart.js'

提问by Keith W.

I have a webapp thats running webpack, typescript and gulp. I want to use chart.js library and I have installed the chart.js npm package. I tried to define chart.js on one of the JS files and I am getting this: error TS2307: Cannot find module 'chart.js'

我有一个运行 webpack、typescript 和 gulp 的 webapp。我想使用chart.js 库并且我已经安装了chart.js npm 包。我试图在其中一个 JS 文件上定义 chart.js，我得到了这个：error TS2307: Cannot find module 'chart.js'

My JS file looks like this:

我的 JS 文件如下所示：

import Chart = require( "chart.js" );

tsconfig:

配置：

{
  "compilerOptions": {
    "module": "commonjs"
  },
  "files": [
    "typings/tsd.d.ts"
  ]
}

IMPORTANT:Noticed that chart.js definitions file doesnt have a proper module declaration. The left is accounting JS library which clearly defines the module and it works. Im guessing this is the issue. How do I use the declared variable or import it into another JS file?

重要提示：请注意，chart.js 定义文件没有正确的模块声明。左边是accounting JS 库，它明确定义了模块并且可以工作。我猜这就是问题所在。如何使用声明的变量或将其导入另一个 JS 文件？

采纳答案by thitemple

With the way the typings were defined for chartjs, you don't need to import it. It is in the global space, so you can just use it like this:

通过为chartjs 定义类型的方式，您不需要导入它。它在全局空间中，因此您可以像这样使用它：

let myChart = new Chart(new CanvasRenderingContext2D());

Of course, you still need to add a reference to chartjs in your page, so that it is available globally.

当然，您仍然需要在您的页面中添加对chartjs的引用，以便在全局范围内可用。

回答by 2grit

I believe there is two issues in your setup, the error you're getting is just the first one, after solving that you will need to setup webpack to recognize your dependencies from TypeScript source code.

我相信您的设置中有两个问题，您遇到的错误只是第一个，解决后您需要设置 webpack 以识别来自 TypeScript 源代码的依赖项。

Considering you have the module and its typings properly installed...

考虑到您已正确安装模块及其类型...

1 - Get tsc to compile your chart test

1 - 获取 tsc 来编译您的图表测试

First, in your tsconfig.jsonyou should omit the "files" directive so the compiler reads all relevant files automatically(including the typings). Then just add an entry on "exclude" for each folder that doesn't need to be compiled (e.g "node_modules"). So your tsconfig.json should look something like this:

首先，tsconfig.json您应该省略“files”指令，以便编译器自动读取所有相关文件（包括类型）。然后只需为每个不需要编译的文件夹（例如“node_modules”）添加一个关于“排除”的条目。所以你的 tsconfig.json 应该是这样的：

{
  "compilerOptions": {
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

As @vintem posted in the answer below, you don't need to require()chart.js as a module, its a package initially designed to be consumed from the browser in the old fashioned way, so it will automatically come into the global scope once the lib is loaded.

正如@vintem 在下面的答案中发布的那样，您不需要将require()chart.js 作为模块，它最初设计为以老式方式从浏览器使用的包，因此一旦lib 已加载。

2 - Configuring webpack to work with tsc

2 - 配置 webpack 以使用 tsc

Create a configuration file for your webpack build in the project root named webpack.config.jswith something like this as content:

在项目根目录中为您的 webpack 构建创建一个配置文件，webpack.config.js内容如下：

module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}

This makes webpack understand dependencies used in your TypeScript code using ts-loader, you can install it with:

这使 webpack 使用ts-loader了解您的 TypeScript 代码中使用的依赖项，您可以使用以下命令安装它：

npm install ts-loader --save-dev

npm install ts-loader --save-dev

If your prefer, you can make those configurations directly in your gulp file.

如果您愿意，可以直接在您的 gulp 文件中进行这些配置。

---

---

UPDATE 1

更新 1

When you use from global scope, well... you just use it, like in the @vintem's answer below. However you need to remove your attempt of writing the definition by yourself and just make sure a /// refto the downloaded chart definitions is on the file typings/tsd.d.ts, otherwise you're overwriting/mixing those definitions and making a big mess... tscyou automatically look typings folder and find everything for you.

当您从全局范围使用时，好吧……您只需使用它，就像下面@vintem 的回答一样。但是，您需要删除自己编写定义的尝试，并确保/// ref下载的图表定义在文件中typings/tsd.d.ts，否则您将覆盖/混合这些定义并弄得一团糟……tsc您会自动查看打字文件夹并为您找到一切。

If you're receiving an error like "cannot find Chart module" it probably means you're still trying to import that module somewhere in your code. You need to try to use it directly with new Chart(...)and maybe receive an error like "cannot find Chart class", but then is a whole different history.

如果您收到“找不到图表模块”之类的错误，则可能意味着您仍在尝试在代码中的某处导入该模块。您需要尝试直接使用它，new Chart(...)并且可能会收到“找不到图表类”之类的错误，但这是一个完全不同的历史。

---

---

Good luck and please give a try in the above procedures and tell me if you have any progress.

祝你好运，请在上述程序中尝试一下，如果您有任何进展，请告诉我。

回答by Gigi Gigi

I had the same issue and my problem was that I run:

我有同样的问题，我的问题是我运行：

npm install chart.js --save 

in a different file (not the one with the ionic project). This might be useful for other people having the same issue.

在另一个文件中（不是离子项目的文件）。这可能对遇到相同问题的其他人有用。

回答by Thomas Verhoeven

So after you do the npm install chart.js --save

所以在你做完之后 npm install chart.js --save

Just do this in your javascript file

只需在您的 javascript 文件中执行此操作

import Chart from 'chart.js'