将 JavaScript 棋盘库添加到 Angular 项目答案

【问题标题】：Adding JavaScript Chessboard Library to Angular Project将 JavaScript 棋盘库添加到 Angular 项目
【发布时间】：2019-10-11 13:27:21
【问题描述】：

我正在尝试设置一个显示棋盘的基本角度网页。我正在使用 here 找到的 chessboardjs 库。

网站为 HTML 和 JS 分别给出的初始化空棋盘的说明是：

<div id="board1" style="width: 400px"></div>

var board1 = ChessBoard('board1', 'start');

在我的打字稿文件中，到目前为止我只有：

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');
}

当我加载我的网页时，我收到以下错误：

ERROR TypeError: Object(...) is not a function

它指向的线是我使用 ChessBoard 函数的地方。

我已经通过 npm 包含了 chessboard 和 @types/chessboard 库并且没有编译错误。

对于如何在我的 Angular 项目中包含 javascript 库的任何指导，我们将不胜感激。

【问题讨论】：

标签： javascript angular typescript typescript-typings chessboard.js

【解决方案1】：

angular.json

...

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

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

types.d.ts

declare const ChessBoard:any;

【讨论】：

当我尝试指向库位置时，我收到此错误：92% 额外的资产处理脚本-webpack-plugin× ｢wdm｣：错误：EISDIR：对目录的非法操作，读取对象。 readSync (fs.js:497:3)
你从哪里导入库？
都来自 node_modules。我尝试了 chessboardjs 库，然后尝试了 @types/chessboardjs 库。例如：“node_modules/chessboardjs”
检查你的 node_modules 文件夹是否存在 lib
从哪里安装了lib？

【解决方案2】：

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 以及stylesheets 文件的node_modules/chessboardjs/www/css/chessboard.css 中添加了jQuery。

【讨论】：