angular-cli@1.3.0-rc.0でSSRしたときのメモ

1 SSRを試してみた
2 SSRとは
3 それで
4 作ってみたけど
5 ちょっと辞めておこうと

SSRを試してみた

参考にしたサイト→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5

SSRとは

チラシの裏程度に。間違ってるかも。

まず、今までの動的WebとSPAの違いに関して
今までの動的WebはPHP、Java(Servlet)、.net？などを利用して、サーバーでHTMLを動的に作成してクライアントに送信する形を取っている。
一方AngularのSPAではロジック部分のみをクライアントに渡し、データは非同期で通信することになっている。モダンWebとかも言うらしい。

wgetやcurlコマンドでサイトにアクセスした場合、今までの動的Webの場合、綺麗なHTMLコードが帰ってくるのに対しAngularのSPAサイトではロジック部分しか取れない。つまり記事の無い空ブログ(実際にはjsを読んでるだけのHTML)みたいな感じになってしまう。そのためSEOに不向きなためSSRを実現しSEOにも対応していこうと言う考えがあった。
angular-universalはSSRを実現するプロジェクトでありAngular4.0では統合された。
Angular2の時からSSRを適用したサイトもあるようだが、やり方は人それぞれで統一はされていない印象。

それで

angular-universalはAngular 4.0にて統合され環境が整ったと思ったけどangular-cli@1.2.3でははまだサポートされていないっぽい。
angular-cli@v1.3.0-rc.0ではplatformと言う項目ができserverが指定できるようになっている。おそらくSSR対応するのだろう。

1.2と1.3のスキーマを見ればなんとなく移行するのだろうなーと感じる。
https://github.com/angular/angular-cli/blob/1.2.x/packages/@angular/cli/lib/config/schema.json
https://github.com/angular/angular-cli/blob/1.3.x/packages/%40angular/cli/lib/config/schema.json

angular-cliのリリーススケジュールみたいなのがどこにあるのか分からない。そのうちrcが外れて正式版になるのだろうな。
Releases · angular/angular-cli

作ってみたけど

同じ事だけど→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5を参考にして作ってみた。

作成方法も全く同じにしたつもりだったが、「ng build -aot」がエラーで動かない。

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src'
resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src'
using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src)
after using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src)
using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)

ERROR in ./src/main.ts

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src'

resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src'

using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src)

after using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src)

using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)

angularのissueに乗ってたけど、まだだめっぽい？？
aotは事前コンパイルなので、妥協しても良いかなと考えてる。ちなみに「ng build」は動く

build後、node index.jsを実行しdistディレクトリのindex.htmlを確認してみるときちんとSSRされたソースが出力されていた。apache上で動かしてみたが問題ないようだった。

ちょっと辞めておこうと

angular-cli標準ではng serveコマンドを実行しておけばソースの変更後、ビルド、再表示してくれる。便利。
しかしSSRの場合はソースの修正、build、WEBにアップ、確認と作業が増える。これを自動化しないと作業効率が悪い。
ちなみにbuild時間は約2秒。プログラムはng new した1ページのサイトだがコンポーネントが増えた場合、どうなるのかしら。

また、debugできない事が辛い。angularを使っていて楽だなと思った一つにdebugが容易。
SSRにしてしまうと開発環境の外で実行するためdebugができないのではないかと。
やり方が間違っているのか知識が足りないのか。とりあえず、まだSSRは適用しないかなーと思う今日このごろ。

rc版だしね