Correct Way To Add 3rd Party Libraries (JS or NPM)

Ionic Framework ionic-v3
1

Hello,

I am trying to put together a simple Ionic v3 chess game using some open source libraries for starters:

chessboardjs and stockfish both exist as pure JS libraries as well as as NPM packages. Which is better to included in my project? I tried the NPM chessboardjs just see what it would take to create a simple chess layout and I have no idea how to integrate it properly after I install the package.

I read some tutorials online on how to integrate pure JS and NPM into Ionic but nothing seems to work. I also skimmed the forums here but these steps looks similar to what I have already done.

Thanks,
Bill

2

Anything available by npm should be installed via npm.

1 Like
3

Prioritize npm libraries. Use npm --save to install. Use ES6 syntax to import.

4

Thanks for suggest NPM over JS. Now I just need a working example.
The chesboardjs library is UI + drag and drop. I just don’t know to actually get the UI up and running in my Ionic 3 app. This is what I need help with. A lot of examples I have seen using NPM libraries do not have UI.

5

It looks as though there are a ton of examples in the chessboard.js docs. If you have a specific question, you could ask that and see if someone has an answer. In general, though, the docs look pretty good.

6

I don’t see any examples in the chessboardjs docs that use the NPM method. The NPM docs for chessboardjs do not have any examples either. All I am looking for is a simple example of adding the chessboard UI into my ionic page. What I have so far:

game.html:

<ion-header>

  <ion-navbar>
    <ion-title>game</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <div id="board"></div>
</ion-content>

game.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ChessBoardJS } from 'chessboardjs';

@IonicPage()
@Component({
  selector: 'page-game',
  templateUrl: 'game.html',
})
export class GamePage {

  board: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.board = ChessBoardJS('board');
    console.dir(this.board);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GamePage');

  }
}

And in ionic serve --lab I get this error:

Runtime Error
Uncaught (in promise): TypeError: Object(...) is not a function TypeError: Object(...) is not a function at new GamePage (http://localhost:8100/build/main.js:317:88) at createClass (http://localhost:8100/build/vendor.js:11254:26) at createDirectiveInstance (http://localhost:8100/build/vendor.js:11082:37) at createViewNodes (http://localhost:8100/build/vendor.js:12445:49) at createRootView (http://localhost:8100/build/vendor.js:12350:5) at callWithDebugContext (http://localhost:8100/build/vendor.js:13565:42) at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:13025:12) at ComponentFactory_.create (http://localhost:8100/build/vendor.js:10271:46) at ComponentFactoryBoundToModule.create (http://localhost:8100/build/vendor.js:3807:29) at NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:43511:44)

I have zero experience importing any 3rd party libraries into Ionic, so hopefully someone on these forums can help me out.

Thanks,
Bill

7

This has nothing to do with user interface. It’s a tool for installing libraries in NodeJS. npm = Node Package Manager. What matters is how to import into Angular 4.

import * as chessBoard from 'chessboardjs';
Someone’s put a sample project on Github. I only looked at it for 30 seconds, but the code doesn’t look obviously crazy.