无法在 Angular 9 中导入 CanvasJS

Question

CanvasJS 没有 npm 包，因此您必须手动下载它才能在本地使用它。 所以，我做到了，将 canvasjs.min.js 添加到我的项目中并将其导入到我的组件中。但它不起作用：

  ERROR in src/app/survey/survey.component.ts:8:27 - error TS2307: Cannot find module 'src/assets/canvasjs.min.js'.

  import * as CanvasJS from 'src/assets/canvasjs.min.js';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这是我的树文件夹：

- src
 -- app
  --- survey
  ---- survey.component.ts
 -- assets 
  --- canvasjs.min.js

在我的组件中，我包含了这样的库：

import * as CanvasJS from 'src/assets/canvasjs.min.js';

这是我的项目根目录中的所有 jsons 配置： tsconfig.spec.json

 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

从 angular.json 中提取

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-httpclient-example": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-httpclient-example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [
            ]
          }

我已经试过了：

• 在angular.json的脚本中添加路径
• 将 .js 移动到任何文件夹中的任何位置
• 使用绝对路径和相对路径更改我的路径
• 更改 baseUrl

Answer 1

我建议将其导入您的 scripts 部分的angular.json。

"scripts": [
  .....
  "/assets/canvasjs.min.js"
]

现在您应该可以将 canvas js 声明为 any 并且一切顺利。

declare const CanvasJS: any;

...
export class MyClass {
   public chart = new CanvasJS.Chart("chartContainer", {
      ....
}