Include js library in angular component

Question

I created a new anglure cli project. I want to use the chessboardjs2 library. It's documentation: https://chessboardjs.com/v2/examples and is github: https://github.com/oakmac/chessboard2

I was able to get the npm package:

npm install @chrisoakman/chessboardjs2

Screen of the content of this package:

but then I was unable to find out how to import it in a component.

I was able to import the library directly in index.html and use it:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chess board</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.css" integrity="sha384-5cxVYodq78gDJaWQIc5iBCUhFERY+VjHOszl2K7BTbZwBbrzQH2IYhOliWHJy6X3" crossorigin="anonymous">
  <script src="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.js" integrity="sha384-v+CI0A3P1tu1MDM6cJaBosdhRHCfZlJrhHUFWBGtckCzH/ChKw9EhDHEWGmPkp8t" crossorigin="anonymous"></script> -->
</head>
<body class="mat-typography">
  <app-root></app-root>
  <div id="myBoard" style="width: 200px;"></div>
  <script>
    const board = Chessboard2('myBoard')
  </script>
</body>
</html>

But this implementation does not allow me to use it in a component.

What can I do?

This is my first angular project and I might not understand everything... I also tryied to insert the chessboard2.min.js and the chessboard2.css in the angular.json without success.

Thanks for your help

EDIT: I am looking for a solution to use the js function of chessboard2.min.js inside a component. Not in the index.html body.

Juan Castillo · Accepted Answer · 2023-03-08T21:11:37.547

You can import each file into the "scripts" and "styles" keys of the angular.json file as follows:

{
    // angular.json
    "styles": [
      "src/styles.scss",
      "node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.css"
    ],
    "scripts": [
      "node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.js"
    ]
}

In your component you can use the package as follows:

import { Component, OnInit } from '@angular/core';

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

  public ngOnInit(): void
  {
    const board = (window as any).Chessboard2('board', {
      draggable: true,
      dropOffBoard: 'trash',
      sparePieces: true
    }); 

    board.start();
  }
}

Altought I think it would be a better idea to use some specific package for angular like ngx-chess-board.

Hello @Juan Castillo, Your solution did not work for me. Moreover, for what I understand your solution would just get the js file from nodes_modules and add it to the head of index.html. But this is already what I do and it does not allow me to call the Chessboard2 function inside a component which is what I am looking for. — Ystalio Di Staniovich, Mar 07 '23 at 10:09
Hi, I have updated the answer in order to explain the code implementation. I guess you would be better with some specific package for Angular. — Juan Castillo, Mar 08 '23 at 21:13

Include js library in angular component

1 Answers1