【Angular × Laravel 連携・環境構築④】Angularのビューを表示させるまで【全4回】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
バックエンドにLaravel、フロントエンドにAngularを使った開発の知識をさらに深めるために、実際に独自でLaravel×Angularのアプリを開発することにしました。
案の定、環境構築の部分で時間が取られたので、ブログにまとめておきたいと思います。
内容が少し多いので、4回に分けて投稿していきます。
概要
以下の手順で環境構築を行います。
・第1回 LaradockでDocker内にLaravelの環境構築を行う
・第2回 LaravelのコンテナとMySQLのコンテナを接続する
・第3回 フロントエンドにAngularを導入する
・第4回 LaravelのBlade.phpを使わずにAngularビューを表示させる
環境は以下の内容で構築します。
・Docker
・Laravel 6.5.1
・Angular 8.0.0
・MySQL 5.7 ※最新版8.0は使ったことがないので、慣れている5.7を使いました
Laravel×Angularの環境構築
前回でblade.phpを使ってAngularのビューを表示させました。
今回は、blade.phpを使わずにAngularのビューを表示させようと思います。
welcome.blade.phpを編集
welcome.blade.php
<a href="{{ url('/home') }}">ホーム</a>
<a href="{{ url('/test') }}">テスト</a> //追加
routeを作成
web.phpにtestのrouteを追加します。
web.php
Route::get('/test', PageController::class . '@index' );
PageControllerを作成
Contorollerの作成方法は割愛します。
Http/Contorollers/PageController.php/index
public function index()
{
return app('files')->get(public_path('dist/index.html'));
}
index.htmlのBase要素を変更
最後にビルド前のindex.htmlのBase要素を変更します。
Base要素のhref属性値が「/」のままだと、リソースなどをドキュメントルートからのパスで読み込もうとするため、ファイルが見つからずエラーになります。
つまり、bodyのscript要素がファイルを見つけることができず、consoleで404エラーとして返ってきます。
src/index.html
<base href="/dist/"> //"/"から"/dist/"に変更
Base要素のpathを変更することで、ビルド出力先のpublic/dist/index.htmlのBase要素もしっかりと変更されます。
これで、ホーム画面のheaderからテストをクリックすると、blade.phpを使わずにindex.html(Angularビュー)が表示されていると思います。
今後に向けて
思い出しながら書いたので、間違っているところが多々あるかもしれません。
間違っているところは、ご指摘いただけると助かります。
今後は、routerでによって呼び出すコンポーネントを変更したいと思っています。
恐らく、app.component.tsでtemplateを「`<outlet-router></outlet-router>`」に変更したらできるのではないかなと憶測は立てています。
記事にできるかは分かりませんが、その辺りの学習を今後は進めていきます。
参考
素晴らしい記事に感謝いたします。