albatrosary's blog

Azure, Angular, CI 最近は Swagger も仲間入り

angular.io サンプルにある Angular with Server Side Rendering

言わずと知れた SSR を触ってみた。サンプルコードは https://angular.io/guide/universal にあり完成されたコードも落とせます。で、サクッと落として動かしてみよう!、、、が、エラーが出る。ので!修正しました!というメモです。

f:id:albatrosary:20180117151655p:plain

サンプルコードの取得

何はともあれ 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 iyarn でモジュールをインストールする

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

めでたしめでたし

f:id:albatrosary:20180117153038p:plain

完成されたコード

完成されたコードはこちら

https://github.com/albatrosary/server-module-example