Angular Universal で プリレンダリングする

はじめに

scully を使ってSSGをしていたが netlify にデプロイするときに mixed contents で警告が出るため移行する。

導入

ng add @nguniversal/express-engine

すると必要なファイルが生成される。

プリレンダリング

上記の add で npm script に prerender が追加されている。
angular.json 上の prerender を実行してくれる。

以下のようにルーティングを渡して上げるとプリレンダリングされたファイル郡が生成される。

ng run <app-name>:prerender --routes /hoge/1 /hoge/2

またルーティングがたくさんある時、ファイルに記述しそのファイルを渡すことが出来る

# routes.txt
/hoge/1
/hoge/2

ng run <app-name>:prerender --routes-file routes.txt

終わりに

当サイトでは assets に JSONファイルをおいてデータ管理しているけどAngularUniversalではフルパスでのアクセスが求められるため、プリレンダリング時にうまく取得できないのでデータを別でホスティングする必要がある、どうにかしたい。