Угловой 2 + Angular-Cli + Laravel 5,3
Используя последний angular-cli, я создал новый проект, и все работает отлично. Далее я попытался интегрировать его в Laravel 5.3. У меня есть этот проект, работающий с systemjs, но я хочу перейти на webpack и воспользоваться angular-cli.
Проблема в том, что в angular-cli.json я не могу указать, что индекс index.php, он принимает только HTML.
По сути, я не могу запустить приложение Angular с этой настройкой.
Как я могу преодолеть это?
Решение
В конце я разделил Laravel и Angular 2, как написал в комментарии Кристиан Сепульведа. Это рекомендуемый подход в любом случае.
Я делаю API с Laravel и использую его с Angular 2.
Другие решения
В моем случае я подаю угловое приложение от Laravel. Я все еще использую webpack для создания своих активов, но у меня есть задание gulp, которое копирует угловой index.html в файл index.blade.php, которому служит приложение laravel.
Я также использую gulp для копирования встроенных файлов из / dist в / public
У меня была такая же проблема, и я обнаружил, что это связанная проблема в их проблемах GitHub:
Выходная папка всегда будет полностью заменена. Вы можете использовать public / folder, чтобы иметь ваш index.php, который будет скопирован в вашу выходную папку, или вывести приложение в отдельную папку и скопировать файлы самостоятельно.
Это по замыслу и не изменится. Это папка вывода сборки, а не папка развертывания. Вы должны отделить эти два шага.
Таким образом, вы не можете добиться того, чего хотите, но это единственное решение, которое я нашел.
Я нашел только одно решение для меня.
- создать сборку для кода на стороне клиента
ng build --prod - Используя gulp, скопируйте сгенерированные файлы в публичный каталог Laravel
gulp copy(здесь вы можете проверить, существуют ли старые файлы сборки, удалите их) - Используя плагин gulp-ingect, вставьте скопированные файлы в макет
gulp inject
— Это может быть использовано в CI и сделано с инструментами автоматизации. В результате у нас есть inline.js и три *. **. Bundle.js файла. В том же основном макете я статически добавляю <base href="/example"> (Вы можете использовать любой определенный в корневом пути Laravel маршруты здесь) и внутри файла шаблона, который загружен из этого пути (в моем случае ‘example.blade.php’), добавьте угловой угловой элемент 2 <st-example>Loading...</st-example>
— При такой настройке у вас есть корневой макет Laravel, внутри которого есть требуемые угловые 2 корневые URL-адреса href и внедренные файлы сценариев из сборки. И ваш файл шаблона для текущего маршрута имеет корневой элемент внутри (он включен в основной макет простым блейдом yeild (‘content’)).
Постскриптум Также вы должны заметить, что если вы используете некоторые http-запросы в angular 2, после интеграции их в проект Laravel это добавит промежуточное ПО защиты csrf к каждому запросу … А если у вас есть новые ошибки в запросах, которые работали ранее, просто проверьте заголовки ,
Так как angular-cli не позволяет вам указать index.phpпусть будет, просто уточни index.html то есть…
И добавьте соответствующий маршрут в маршрутизацию Laravel. Как этот, например:
Route::any('{path?}', function () {
return File::get(public_path() . '/index.html');
})->where("path", ".+");
Кстати, это просто ловушка для любых неизвестных маршрутов … Но я думаю, вы поняли.