LaravelでAngularを使うには？

Vue.jsやReactと違ってphp artisan presetなど公式的な共存がサポートされていないLaravelとAngularの組み合わせに関して試行錯誤したまとめ

Composer及びAngular CLIの導入は済んでるという前提にて

Laravelプロジェクトの作成

$ composer create-project laravel/laravel laravel_angular "5.7.*"
$ laravel_angular

今回デフォルトで入っているVue.jsは不要なので間引く（干渉はしないと思うけど念のため）

resources/js/app.js

-window.Vue = require('vue');

-Vue.component('example-component', require('./components/ExampleComponent.vue'));

-const app = new Vue({
-    el: '#app'
-});

以下の手順で間引いた場合bootstrapの正常動作が壊れたので却下(bootstrap.jsにjqueryの再追記が必要)
$ php artisan preset none
$ php artisan preset bootstrap

resourcesディレクトリにangulerプロジェクトを配備

$ cd resources
$ ng new anguler
$ cd angular

Angularビルド時の出力先変更
Laravel-mixとAngular CLIの統一は難しそうなので
今回は/public/js/と/public/ng/は分ける事にする

angular.json

-"outputPath": "dist/angular",
+"outputPath": "../../public/ng",

簡単のためLaravelのAuth機能を利用.env設定は省略

cd ../..
php artisan migrate
php artisan make:auth

resources/views/layouts/app.blade.phpとresources/views/home.blade.phpの書き換え

resources/views/layouts/app.blade.php

+    <script src="{{ asset('ng/runtime.js') }}" defer></script>
+    <script src="{{ asset('ng/polyfills.js') }}" defer></script>
+    <script src="{{ asset('ng/styles.js') }}" defer></script>
+    <script src="{{ asset('ng/vendor.js') }}" defer></script>
+    <script src="{{ asset('ng/main.js') }}" defer></script>
</body>

resources/views/home.blade.php

You are logged in!
+<br />
+<app-root></app-root>

ログイン後のホーム画面にて以下の表示により動作確認とした

またAngularソースtsを自動にビルドする場合はangularのディレクトリにて以下のコマンドを実行する

ng build --watch

本格的にやってそうなところのリンク

本記事とやり方は違いますが本格的にやってそうな所が何件かあったのでリンク集
laravel-angular
Angularを使えるLaravel環境を作る。あとcralityも使う。
【Laravel】【Angular】Laravel+AngularでTodoアプリを作りながら勉強した