前幾天在寫ShinyColorsDB-DataSite的時候遇到一點北七問題，寫點心得

環境

Ubuntu 22.04LTS

Angular 14

PIXI.JS v5

網站大致上寫好了

結果在打包成SSR的時候瘋狂出錯

打包過程跳出來的錯誤訊息

window is undefined

用platformid在ssr的時候禁用了pixijs的執行仍然沒解決問題，於是我請出了估狗大神ㄏ

看了一下是SSR的時候執行了瀏覽器的API的問題，嘗試過mock，但沒有作用。當下直覺是pixi問題，於是我去翻了他的issue

好傢伙，他們宣稱在V6版本解決了這個問題

還能怎麼辦，硬上阿

於是我更新到了V6版，恩，不出所料IDE跳了一堆error出來

整理了一下問題大概可以分成三大塊

1. PIXI.Graphics Interactive 的attribute消失的問題
2. offscreencanvas not found
3. SSR打包
4. expressjs default export

我絕對不會承認我中間被這幾個問題整破防了好幾天

解

1.

問題1 相對好處理，解答在這裡

https://github.com/pixijs/pixijs/releases/tag/v6.0.0

Migration部分清楚的寫了需要更改的tsconfig部分，但是我一開始直接更新到6.5.2版，所以沒看到這部分敘述

ㄏ，以後記得要去挖一大版號.0.0的release敘述，算是上了一課

2.

問題2 上網估狗了一圈，大概是缺了 @types/offscreencanvas 的問題

npm install一下然後去tsconfig的compileoptions裡面加了這段

"types": ["offscreencanvas"]

然後嘗試性的跑了一下dev:ssr

媽的她動了

3.

好，既然app跑起來了那應該可以打包成SSR跑build了吧?

誒恭喜，offscreencanvas not found 捲土重來，又上網找了一圈還是問題2的解法

這時我注意到兩個檔案，tsconfig.server.json & tsconfig.app.json

死馬當活馬醫，把

"types": ["offscreencanvas"]

也加進這兩個檔案試試

恩，打包成功

ㄏ

4.

最後一件事，用pm2把打包完產生的js檔案用pm2掛起來!

然後我又破防了

Type 'typeof e' has no compatible call signatures

恩，這回換成安裝ng-universal的時候生成的expressjs檔案開搞了

又上網估狗了一圈

this

ng-universal產生的檔案有這一行

import * as express from 'express';

改成default export

import express from 'express';

終於結束

馬的搞死我

成功deploy出來的東西在這裡

https://shinycolors.moe/

大概這樣，留在這邊給大家一點參考