1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

1
Last updated at Posted at 2018-04-06

はじめに

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)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?