Question

我正在尝试在Angular CLI（7.2.3）项目中使用Google图表，但遇到了使键入工作正常的问题。

首先，我使用此命令安装了类型（带有和不带有-dev标志）：

npm install --save-dev @ types / google.visualization

完成此操作后，intellisense将立即在Visual Studio Code中工作，并且在创建如下所示的简单测试时不会出现任何突出显示的错误：

const chartBoxStyle: google.visualization.ChartBoxStyle = {};

但是，当我尝试通过运行 ng build 进行构建时，出现此错误：

错误TS2503：找不到名称空间“ google”。

我尝试将其添加到我的文件中没有运气：

declare const google: any;

我的tsconfig.json文件具有用于typeRoots的以下内容，并且我在其中看到google.visualization文件夹：

"typeRoots": ["node_modules/@types"]

由于我对如何克服这一困难一无所知，任何帮助将不胜感激。

Answer 1

摘要

问题是"types"文件中的./src/tsconfig.app.json属性。

即使根./tsconfig.json文件将"typeRoots"设置为["node_modules/@types"]，./src/tsconfig.app.json文件也通过将其自己的types属性设置为空数组。

解决方案

打开./src/tsconfig.app.json并进行以下两项更改之一：

删除"types": []"属性；告诉编译器包括所有typeRoots软件包。
或者，将要使用的类型添加到"types": []"数组中。

后一个选项如下所示：

"types": [
  "google.visualization"
]

详细信息

ng build从./angular.json文件中读取其配置。

该./angular.json文件将"tsConfig"设置为"src/tsconfig.app.json"。

该./src/tsconfig.app.json文件将其"types"属性设置为空数组。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []  <------------------------------- empty array
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

那是问题所在，因为如the TypeScript documentation says：“如果指定了类型，则仅包括列出的软件包。”

如何在Angular CLI中使用google.visualization类型？

1 个答案:

摘要

解决方案

详细信息