Angular 9 Universal集成PIXI.js 6.1.3构建运行异常解决方案问询

1. 移除冲突的类型依赖 #

pixi.js v6+ 已经内置完整的TypeScript类型定义，你安装的@types/pixi.js@5版本和pixi.js v6不匹配，会导致类型报错，先卸载：

npm uninstall @types/pixi.js

2. 修正TypeScript配置 #

把以下配置放到tsconfig.json顶层的compilerOptions节点下，不要放到angularCompilerOptions里：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

然后修改server.ts中的express导入语句，解决命名空间导入不可调用的报错：
把原来的import * as express from 'express';改为：

import express = require('express');

3. 解决服务端运行self is not defined报错 #

这个报错的根本原因是pixi.js是纯浏览器端库，依赖浏览器全局对象self/window，而Angular Universal服务端渲染运行在Node.js环境，不存在这些全局对象。你不需要让pixi在服务端运行，只要保证仅在浏览器端加载初始化pixi即可，推荐两种实现方案：

方案A：平台判断+动态导入（推荐） #

修改你的component代码，移除顶部的pixi静态导入，只有在浏览器环境才动态加载pixi：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
// 仅导入类型做类型标注，编译后会自动移除不会触发加载
import type { Application } from 'pixi.js';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  public app: Application | null = null;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    // 仅浏览器端初始化pixi
    if (isPlatformBrowser(this.platformId)) {
      import('pixi.js').then(pixi => {
        this.app = new pixi.Application({});
        // 后续pixi逻辑都放在这个分支里执行
      });
    }
  }
}

注：你之前的component代码存在语法错误，成员变量和初始化逻辑要放在class内部。

方案B：全局引入调用 #

如果不想用动态导入，可以直接在index.html里引入pixi的本地资源或者CDN资源：

<script src="pixi/6.1.3/pixi.min.js"></script>

然后在全局类型声明文件（比如src目录下的typings.d.ts）里添加：

declare const PIXI: typeof import('pixi.js');

之后同样在平台判断的浏览器分支里直接用new PIXI.Application({})即可，服务端打包时不会处理全局对象，不会触发加载错误。

内容的提问来源于stack exchange，提问作者Finn