Pixi.js in Angular

Pixi.jsをAngular7で動かす

pixi.jsのインストール

$ npm install --save pixi.js

pixi.jsの型ファイルのインストール

npm install --save @types/pixi.js

angular.jsonの修正

build時にpixi.jsを含めるようにscriptsの配列にPATHを追記する

angular.json

{
  ...
  "projects": {
    "angular7-metronome2": {
      ...
      "architect": {
        "build": {
            "scripts": [
              "node_modules/pixi.js/dist/pixi.min.js"
            ]

Pixi.jsを使う

Pixiを使うコンポネートを作成して、tsファイルに以下のように書き込む

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

declare var PIXI: any;

@Component({
  ...
})
export class PcComponent implements OnInit {
  public app: any;

  constructor() {
      this.app = new PIXI.Application({
          width: 800,
          height: 600
      });
  }

  ngOnInit() {
  }

}