Добавление библиотеки шахматной доски JavaScript в угловой проект - PullRequest
Новая
       42

Добавление библиотеки шахматной доски JavaScript в угловой проект

0 голосов
/ 25 мая 2019

Я пытаюсь настроить базовую угловую веб-страницу, которая отображает шахматную доску. Я использую библиотеку 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');
}

Когда я загружаю свою веб-страницу, я получаю следующую ошибку:

ОШИБКА TypeError: Object (...) не является функцией

и строка, на которую он указывает, - это место, где я использую функцию ChessBoard.

Я включил библиотеки chessboard и @ types / chessboard через npm и не вижу ошибок компиляции.

Буду очень признателен за любые указания относительно того, как я могу включить библиотеку javascript в свой проект Angular.

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

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

}

Пожалуйста, убедитесь, что вы добавили jQuery в index.html или scripts вашего angular.json файла, а также node_modules/chessboardjs/www/css/chessboard.css в stylesheets вашего angular.json файл.

0 голосов
/ 25 мая 2019

angular.json 

...

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

создать новый файл types.d.ts в каталоге src

types.d.ts 

declare const ChessBoard:any;
...