Angularのチュートリアルで使用するStackBlitz dev serverが動作しない

AngularのチュートリアルはStackBlitzと呼ばれるブラウザベースの開発環境を採用しています。StackBlitzにはAngularアプリをリアルタイムでレンダリングする機能が備わっていますが、ブラウザの設定でサードパーティのクッキーを拒否していると、レンダリングに必要な開発サーバの起動に失敗します。本記事ではChromeでStackBlitzのレンダリングをちゃんと動作させるための手順を紹介します。

AngularのチュートリアルのページからStackBlitzで新規プロジェクトを作成する

Angularのチュートリアルの最初のページで、”Click here to create a new project in StackBlitz.”とあるリンクからStackBlitzの新規プロジェクトを作成します。リンクをクリックすると新規タブでStackBlitzのエディタ画面が開きます。

StackBlitzは横3ペインの画面になっており、正常であれば右端がレンダリング結果が表示されるペインです。上の画像では表示されていません。

画面右上の”Open in New Window”をクリックし、別ウィンドウでレンダリング結果を表示しても、”Starting dev server”の表示がグルグル回り続けるばかりで正常に動作する様子はありません。

StackBlitzのレンダリングが正常動作するように、クッキーの設定を変更します。アドレスバー末尾のクッキーアイコンをクリックすると、開いているページのクッキーの許可・拒否を設定できます。ここではサードパーティクッキーの設定を変更する必要があるため、”Show cookies and other site data…”をクリックします。

新しく開いたダイアログ内で、右のBlockedタブを選択します。拒否されているクッキーとして表示されている”mdprdgbqlyk.angular.stackblitz.io”を選択し、下の”Allow”ボタンを押してこのクッキーを許可します。その後、”Done”ボタンを押してダイアログを閉じ、StackBlitzのページをリロードします。

正常にAngularアプリのレンダリング結果が表示されるようになりました。これで設定完了です。なお、StackBlitzのプロジェクトごとにサードパーティクッキーのドメインは異なるため、許可はプロジェクト毎に行う必要があります。

参考リンク

Share - この記事をシェアする