言わずと知れた SSR を触ってみた。サンプルコードは https://angular.io/guide/universal にあり完成されたコードも落とせます。で、サクッと落として動かしてみよう！、、、が、エラーが出る。ので！修正しました！というメモです。
サンプルコードの取得
何はともあれ angular.io からコードをダウンロードします。
https://angular.io/guide/universal
zip でダウンロードされますので解凍し npm i 若しくは yarn を実行します。が、ここでも変更が必要のためやらない！
main.server.ts ファイルの追加
issue にも書かれてますが main.server.ts が抜け落ちてます。src に追加して中身は下記を記載します。
export { AppServerModule } from './app/app.server.module';
https://github.com/angular/angular/issues/21516
nguniversal のバージョンアップ
1系が使われているので5系に変更する。package.json を開き
"@nguniversal/express-engine": "^1.0.0-beta.3", "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
を
"@nguniversal/express-engine": "^5.0.0-beta.5", "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
とする。ここまでできたので npm i か yarn でモジュールをインストールする
server.ts がエラーになる
ビルド後、実行するとエラーが発生する
$ npm run build:ssr && npm run serve:ssr
> angular-io-example@1.0.0 serve:ssr /Users/albatrosary/Sandbox/ServerModuleSample
> node dist/server.js
/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2230
throw staticError('\'deps\' required', provider);
^
Error: StaticInjectorError[{provide:ResourceLoader, useClass:FileLoader}]: 'deps' required
at staticError (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2263:12)
at computeDeps (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2230:15)
at resolveProvider (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2025:33)
at recursivelyProcessProviders (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2082:53)
at recursivelyProcessProviders (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2071:17)
at recursivelyProcessProviders (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:2071:17)
at new StaticInjector (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:1982:9)
at Function.Injector.create (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:1954:16)
at JitCompilerFactory.createCompiler (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:143438:97)
at Object.ngExpressEngine (/Users/albatrosary/Sandbox/ServerModuleSample/dist/server.js:159941:36)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-io-example@1.0.0 serve:ssr: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-io-example@1.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/albatrosary/.npm/_logs/2018-01-17T05_46_58_880Z-debug.log
$
universal-starter を見ると違いがあるので修正し再度ビルドを行う。修正場所が正しいかはあまり調べていない
https://github.com/angular/universal-starter
完成！
下記コマンドでビルド&実行する
npm run build:client-and-server-bundles npm run serve:ssr
めでたしめでたし
完成されたコード
完成されたコードはこちら
