Angular CLI 6.0.0 RCでUniversal + App Shell

8266 ワード
angular-universal Angular angular-cli Angular テキストリンク

Angular CLIの最新版である6.0.0がもうすぐ登場しますね！

この記事では、現在RC版のAngular CLI 6.0.0でUniversal（サーバーサイドレンダリング）とApp Shellを組み込む手順を紹介します。

※6.0.0リリース後は操作が異なる場合があります

プロジェクトの作成

まずはAngular CLI 6.0.0 RCをインストールしてください。

$ npm i -g @angular/cli@next

新しいプロジェクトを作成します。

$ ng new my-app --routing
$ cd my-app

Universalを組み込む

Universal用のファイル一式を作成します。

$ ng g universal --client-project=my-app

依存関係を更新するためnpm installを実行しましょう。

$ npm i

angular.jsonのパス設定が間違っているので修正します。
※現在は修正されています

angular.json
"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/my-app-server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  }
}

↑今後修正されると思います（https://github.com/angular/angular-cli/issues/10288）

tsconfig.server.jsonの場所が悪いので移動します。
※現在は修正されています

$ mv tsconfig.server.json src/tsconfig.server.json

移動したのでentryModuleのパスを修正します。
※現在は修正されています

src/tsconfig.server.json
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "module": "commonjs"
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

App Shellを組み込む

App Shellを作成します。

$ ng g app-shell --client-project=my-app --universal-project=my-app

プロダクションビルド用に設定を変更します。

angular.json
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "options": {
    "browserTarget": "my-app:build",
    "serverTarget": "my-app:server",
    "route": "shell"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-app:build:production"
    }
  }
}

アプリのビルド

ng runでビルドします。

$ ng run my-app:app-shell:production

ブラウザーで確認してみましょう。

$ npx http-server ./dist/my-app

でサーバーを起動して、http://localhost:8080を開くとビルドしたアプリを見ることが出来ます。

おわりに

RC版のAngular CLIでApp Shellを組み込むところまでできました。
手で修正するのが非常に面倒ですね！
2018/05/06 v6.0.0でUniversalのバグが修正されました、やったね！

Angular CLI 6.0.0はまだ開発中のため、1.7系からコマンドが変更された部分では苦労するかもしれません。--helpオプションで確認したり、angular/angular-cliやangular/devkitのドキュメントやIssuesを見ると良いと思います。

参考

https://next.angular.io/guide/universal
https://github.com/puku0x/angular-pwa-sample/tree/next