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

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

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

この記事の内容

1 概要
2 Laraveをインストール
3 Laravelのresource内にAngularのアプリを作成
4 Angularをビルド
5 Laravelのwebpack.mix.jsを編集
6 Laravelのルートディレクトリでnpm installを実行
7 Laravelのpackage.jsonのcross-env.jsのパスを修正
8 ビルドしたapp.jsを呼び出す
9 次の目標

概要

以下の手順で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の初期画面が出ていたら成功です。