Laravel内でAngularを使えるようにする方法を説明します。
最善か分かりませんが、とりあえず動くようにしたところまで。
概要
以下の手順でAngularをLaravel内で使えるようにします。
- Laraveをインストール
- Laravelのresource内にAngularのアプリを作成(ng newする)
- Angularをビルド(ng build)
- Laravelのwebpack.mix.jsを編集(ng buildで出来たjsをまとめる)
- Laravelのルートディレクトリでnpm installを実行
- Laravelのpackage.jsonのcross-env.jsのパスを修正
- Laravelのルートディレクトリでnpm run devを実行する
ng buildを自分でやらずにnpm run devだけで済むようにしたいですが、それはまた今度。
Laraveをインストール
> composer create-project --prefer-dist laravel/laravel アプリ名
Laravelのresource内にAngularのアプリを作成
Angular CLIが未インストールであればインストールします。その後、ng new でAngularアプリを作ります。
> cd Laravelアプリ名/resource/ > npm install -g @angular/cli > ng new Angularアプリ名
Angularをビルド
Angularのビルドを実行します。
> cd Angularアプリ名 > ng build
Laravelのwebpack.mix.jsを編集
Laravelアプリのルートディレクトリのwebpack.mix.jsを以下のようにします。
const mix = require('laravel-mix'); mix.js([ 'resources/angular/dist/angularアプリ名/runtime.js', 'resources/angular/dist/angularアプリ名/styles.js', 'resources/angular/dist/angularアプリ名/polyfills.js', 'resources/angular/dist/angularアプリ名/vendor.js', 'resources/angular/dist/angularアプリ名/main.js' ], 'public/js/app.js');
Laravelのルートディレクトリでnpm installを実行
Laravelのルートディレクトリでnpm install を実行します。
Windows、またはWindows上で動かしているVMの場合はnpm install –no-bin-links を実行します。
Laravelのpackage.jsonのcross-env.jsのパスを修正
このままnpm run devしたいところですが、そのままだと以下のようなエラーになりビルドできません。
>npm run dev @ dev C:\**** npm run development @ development C:\**** cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 'cross-env' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 1 …
そこで、package.jsonのcross-envをパスを指定する形に修正します。
{ "private": true, "scripts": { "dev": "npm run development", "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.5", "popper.js": "^1.12", "vue": "^2.5.7" } }
Laravelのルートディレクトリでnpm run devを実行
npm run dev を実行します。
これでwebpackとlaravel-mixが動き、Angularでビルドしたjsがpublic/js/app.jsに集約されます。
ビルドしたapp.jsを呼び出す
ためしにwelcome.blade.phpを以下のように修正します。
<!DOCTYPE html> <html> <head> <base href="/"> <title>Angular With Laravel</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> </head> <body> <app-root></app-root> <script type="text/javascript" src="/js/app.js"></script> </body> </html>
Angularの初期画面が出ていたら成功です。
次の目標
とりあえずLaravelのビューからAngularを動かせるようにしました。
しかし毎回Angularのディレクトリでng buildするのは面倒なので、Laravelのnpm run dev で一発でビルドできるようにしていきたいと思います。
package.json とwebpack.mix.js を修正すれば可能だと考えています。
コメント/ピンバック