How to add 3rd party JS (p5.js, phaser, mo.js)?

Hello Ionic community!

Im new to ionic and need a little help.

I have implemented things like chart.js with the tutorial from, and I really liked the out come.


I tried to do the same thing with p5.js from processing and could not get it to work…

I have to display data for class on Data Visualization and want to use IONIC with mo.js, p5.js, or phaser.js to display this data.

Can anyone please help me find an answer to this?

Were you able to find a fix for this?

Facing this problem too. Don’t know how to require third party lib into ionic.
Npm install, import it in component.ts just doesn’t work.


as long you didn’t show code and nobody knows what you want to implement, you will never get a satisfing answer.

Best regards, anna-liebt

1 Like

Google is a great starting point


See, the moment.js docs for an example of how to include third-party JavaScript:

This works. But I want to use npm for better management.
However, I had no luck fixing the typing error.

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

import p5 from 'p5';  -> show the error below
// [ts] File '/Users/xxx/dev/birthcard/ionic-p5/node_modules/p5/lib/p5.d.ts' is not a module.


Not sure if this is still an issue, but to add p5 to ionic you need to add it to the DOM, and I think Renderer2 works well, this works for me:

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

import * as p5 from 'p5';

  selector: 'app-p5',
  templateUrl: './',
  styleUrls: ['./'],
export class P5Page implements OnInit {

    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnInit() {

    new p5(p => {
      let x = 100;
      let y = 100;

      p.setup = () => {
        p.createCanvas(700, 410);

      p.draw = () => {
        p.rect(x, y, 50, 50);
    }, this.el.nativeElement);

1 Like