向Angular项目添加JavaScript棋盘库

我试图建立一个基本的角度网页，显示一个棋盘。我正在使用找到的chessboardjs库

网站针对HTML和JS分别给出了初始化空棋盘的说明：

var board1=棋盘（'board1'，'start'）

在我的typescript文件中，到目前为止我只有：

import { Component } from '@angular/core';
import { ChessBoard } from 'chessboardjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    board1 = ChessBoard('board1', 'start');
}

加载网页时，出现以下错误：

错误类型错误：对象（…）不是函数

它指向的那条线就是我使用棋盘函数的地方

我通过npm包含了棋盘和@types/chessboard库，没有编译错误

任何关于如何在Angular项目中包含javascript库的指导都将不胜感激。
Angular.json

...

"scripts": [
      "call ChessBoard library here"
   ],
...

在src目录中创建新文件
types.d.ts

类型d.ts

declare const ChessBoard:any;

angular.json

...

"scripts": [
      "call ChessBoard library here"
   ],
...

在src目录中创建新文件
types.d.ts

类型d.ts

declare const ChessBoard:any;

AppComponent应该是

import { Component, AfterViewInit } from '@angular/core';
import * as ChessBoard from 'chessboardjs/www/js/chessboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

  title = 'frontend';
  board1: ChessBoard;

  ngAfterViewInit() {
    this.board1 = ChessBoard('board1', {
      draggable: true,
      pieceTheme: 'node_modules/chessboardjs/www/img/chesspieces/wikipedia/{piece}.png'
    });
  }

}

请确保您在
angular.json
文件的
index.html
或
scripts
中添加了jQuery，并在
angular.json
文件的
样式表中添加了
节点模块/chessboardjs/www/css/chessboard.css
。

import { Component, AfterViewInit } from '@angular/core';
import * as ChessBoard from 'chessboardjs/www/js/chessboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

  title = 'frontend';
  board1: ChessBoard;

  ngAfterViewInit() {
    this.board1 = ChessBoard('board1', {
      draggable: true,
      pieceTheme: 'node_modules/chessboardjs/www/img/chesspieces/wikipedia/{piece}.png'
    });
  }

}

请确保您在
angular.json
文件的
index.html
或
scripts
中添加了jQuery，并且在
angular.json
文件的
样式表中添加了
node\u modules/chessboardjs/www/css/chessboard.css
。
当我尝试指向库位置时，我得到这个错误：92%其他资产处理脚本webpack插件×｢wdm｣：错误：EISDIR:目录上的非法操作，读取Object.readSync（fs.js:497:3），从何处导入库？都来自节点_模块。我尝试了chessboardjs库，然后是@types/chessboardjs库。例如：“node_modules/chessboardjs”检查您的node_modules文件夹中是否存在库？当我尝试指向库位置时，会出现以下错误：92%额外的资产处理脚本webpack plugin×｢wdm｣：错误：EISDIR：目录上的非法操作，读取地址为Object.readSync（fs.js:497:3）从何处导入库？都是从node_模块导入的。我尝试了chessboardjs库，然后是@types/chessboardjs库。例如：“node_modules/chessboardjs”检查您的node_modules文件夹中是否存在库，是否从安装库的位置开始？