angular
ssr
angular-universal

【Angular Universal】開発版 angularfire2 で SSR を試す

はじめに

Angular で firebase を扱う最もメジャーな方法は、公式ライブラリの angularfire2 を使用する方法です。
しかし、4/6 時点で angularfire2 は Universal の処理に対応しておらず、使用することが出来ません。

他のライブラリ だと対応しているものもあるのですが、やはり公式のライブラリを使いたいものです。
そんな感じで悶々としていたところ、つい先日開発版 angularfire2 を使用した SSR のサンプルリポジトリ が公開されました。

同じように使ってみたら無事 SSR できたので、一足先に SSR を試して本リリースに備えたい…という方は参考になるかもしれません。

本リリース後( おそらく v6 )、この記事の価値は 0 になるので、その場合はスルーしてください。

導入方法

下記 URL で angularfire2 をインストールする

package.json
"angularfire2": "https://github.com/jamesdaniels/onSnapshot/raw/master/angular/angularfire2.tar.gz",

XMLHttpRequest の定義

ライブラリ内部で XMLHttpRequest を使っているようなのですが、サーバーサイドには存在しません。
ポリフィルを読み込んでグローバルに定義します。

npm i -S xmlhttprequest
server.ts
global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;

読み込む場所は最初の方でも良いかもしれませんが、domino 事件 のようなことが起きるかもしれないのでレンダリング直前の方がベターかもしれませんね

おわりに

現在 firestoreauth モジュールを試しているのですが問題なく動いています。
database ( RTDB ) は試していないのでわかりませんが、恐らく大丈夫なのではないでしょうか。(無責任)

angularfire2 チームがんばえー (o^□^o)