Блог

• установка npm -g ionic
• ionic запускает pixiApp пустым —v2
• cd pixiApp
• установка через npm
• установка через npm pixi.js —сохранить (версия 4.1.0)
• установка через npm -сохранить @types/pixi.js (Я знаю, что это типы def для v3 🙁 )
• Я заменяю содержимое pixiAppnode_modules@typespixi.jsindex.d.ts с помощью https://github.com/pixijs/pixi-typescript/blob/v4.x/pixi.js.d.ts
• В приложении home.ts по умолчанию отключено, я добавил этот код :

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as PIXI from 'pixi.js';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  ngOnInit() {
    PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb});
  }
}  

• и, наконец, я запустил приложение с помощью команды: ionic serve

Результаты KO

[16:56:52] накопительный файл: экспорт ‘autoDetectRenderer’ не определен с помощью ‘D:labsionic2pixiAppsrcpageshomehome.ts ‘

Я перепробовал много вариантов, но только с ошибками : (:(

Вы можете мне помочь?

С наилучшими пожеланиями

Для меня это в принципе сработало с самого начала. Я поступил точно так, как вы описали, чтобы настроить новый, пустой проект ionic и установить pixi.js пакет и типы. Я также выполнил импорт так, как вы описали.

Вот мои исходные файлы для «домашней» страницы:

home.ts

 import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as PIXI from 'pixi.js';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild("pixi")
  public pixiContainer: ElementRef;
  private pixi:PIXI.Application;

  constructor(public navCtrl: NavController) { }

  ionViewDidEnter() {
    this.pixi = new PIXI.Application(640,480,{backgroundColor:0x112266});
    let aspectRatio = (this.pixi.renderer.height / this.pixi.renderer.width);
    this.pixi.view.style.width = "100%";
    this.pixi.view.style.height = `${aspectRatio*100}%`;
    this.pixiContainer.nativeElement.appendChild(this.pixi.view);
  }
}
  

home.scss

 page-home {
    .pixiContainer {
        width: 100%;
        height: 100%;
        display: block;
    }
}
  

home.html

 <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div #pixi class="pixiContainer">
  </div>
</ion-content>
  

И это сработало. У меня есть темно-синий pixijs canvas.

Это моя текущая информация о версии для ionic (поскольку все быстро меняется):

 cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v7.10.0
    npm  : 4.2.0 
    OS   : macOS Sierra
  

Надеюсь, это поможет!