Angular 2 + angular -cli + Laravel 5.3

Используя последний angular -cli, я создал новый проект, и все работает отлично. Затем я попытался интегрировать его в Laravel 5.3. У меня есть этот проект, который работает с systemjs, но я хочу переключиться на webpack и воспользоваться angular -cli.

Проблема в том, что в angular -cli.json я не могу указать, что индекс index.php, он принимает только HTML.

В принципе, я не могу запустить приложение Angular вообще с этой настройкой.

Как я могу это преодолеть?

Ответы

Ответ 1

В конце я разделил Laravel и Angular 2, как написал в комментарии Кристиан Сепульведа. В любом случае это рекомендуемый подход.

Я делаю API с Laravel и использую его с Angular 2.

Ответ 2

В моем случае я обслуживаю приложение angular из laravel. Я все еще использую webpack для создания своих активов, но имею задачу gulp, которая копирует angular index.html как index.blade.php, к которому служит приложение laravel. Я также использую gulp для копирования встроенных файлов из /dist в/public

Ответ 3

У меня была та же проблема, и я обнаружил, что это проблема в их проблемах с GitHub:

Выходная папка всегда будет полностью заменена. Вы можете использовать общедоступную/папку, чтобы иметь индекс index.php, который будет скопирован в вашу выходную папку, или вывести приложение в отдельную папку и скопировать файлы самостоятельно.

Это по дизайну и не изменится. Это папка вывода сборки, а не папка развертывания. Вы должны отделить эти два шага.

Итак, вы действительно не можете достичь того, чего хотите, но это единственный обходной путь, который я нашел.

Ответ 4

Я нашел для меня только одно решение.

  • создать сборку для клиентского кода ng build --prod
  • Используя gulp скопированные сгенерированные файлы в Laravel public dir gulp copy (здесь вы можете проверить, существуют ли старые файлы сборки, удалите их)
  • Использование плагина gulp -ingect вставляет скопированные файлы в макет gulp inject

- Это можно использовать в CI и делать с инструментами автоматизации. В результате мы имеем inline.js и три *. **. Файла bundle.js. В том же главном макете я статически добавляю <base href="/example"> (вы можете использовать любые определенные в корневом пути пути Laravel здесь) и внутри файла шаблона, загруженного с этого пути (в моем случае "example.blade.php" ) добавить angular 2 корневой элемент <st-example>Loading...</st-example>

- С помощью этой настройки у вас есть корневой макет Laravel, внутри которого требуется angular 2 root url href и вставляемые файлы скриптов из сборки. И ваш файл шаблона для текущего маршрута имеет внутренний корневой элемент (он включен в основной макет простым кликом yeild ( "content" )).

P.S. также вы должны заметить, что если вы используете некоторые http-запросы в angular 2, после того, как вы включите его в проект Laravel, это добавит промежуточное ПО защиты csrf к каждому запросу... И если у вас есть некоторые новые ошибки в запросах, которые работают ранее просто проверьте заголовки.

Ответ 5

Так как angular -cli не позволяет указать index.php, пусть это будет, просто укажите index.html, затем там... И добавьте подходящий маршрут в маршрутизацию Laravel. Как это, например:

Route::any('{path?}', function () {
    return File::get(public_path() . '/index.html');
})->where("path", ".+");

Btw, это просто ловушка для любых неизвестных маршрутов... Но я думаю, вы поняли.