Laravel内でAngularを使えるようにする。

Laravel内でAngularを使えるようにする方法を説明します。

最善か分かりませんが、とりあえず動くようにしたところまで。

概要

以下の手順でAngularをLaravel内で使えるようにします。

  1. Laraveをインストール
  2. Laravelのresource内にAngularのアプリを作成(ng newする)
  3. Angularをビルド(ng build)
  4. Laravelのwebpack.mix.jsを編集(ng buildで出来たjsをまとめる)
  5. Laravelのルートディレクトリでnpm installを実行
  6. Laravelのpackage.jsonのcross-env.jsのパスを修正
  7. Laravelのルートディレクトリでnpm run devを実行する

ng buildを自分でやらずにnpm run devだけで済むようにしたいですが、それはまた今度。

Laraveをインストール

Laravelのresource内にAngularのアプリを作成

Angular CLIが未インストールであればインストールします。その後、 ng new でAngularアプリを作ります。

Angularをビルド

Angularのビルドを実行します。

Laravelのwebpack.mix.jsを編集

Laravelアプリのルートディレクトリのwebpack.mix.jsを以下のようにします。

Laravelのルートディレクトリでnpm installを実行

Laravelのルートディレクトリで npm install を実行します。

Windows、またはWindows上で動かしているVMの場合は npm install --no-bin-links を実行します。

Laravelのpackage.jsonのcross-env.jsのパスを修正

このままnpm run devしたいところですが、そのままだと以下のようなエラーになりビルドできません。

そこで、package.jsonのcross-envをパスを指定する形に修正します。

Laravelのルートディレクトリでnpm run devを実行

npm run dev を実行します。

これでwebpackとlaravel-mixが動き、Angularでビルドしたjsがpublic/js/app.jsに集約されます。

ビルドしたapp.jsを呼び出す

ためしにwelcome.blade.phpを以下のように修正します。

Angularの初期画面が出ていたら成功です。

次の目標

とりあえずLaravelのビューからAngularを動かせるようにしました。

しかし毎回Angularのディレクトリでng buildするのは面倒なので、Laravelの npm run dev で一発でビルドできるようにしていきたいと思います。

package.json と webpack.mix.js を修正すれば可能だと考えています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*