Angular 2 + angular-cli + Laravel 5.3

Question

使用最新的angular-cli，我创建了一个新项目并一切运行良好。接下来，我尝试将其集成到Laravel 5.3中。我已经使用systemjs使此项目工作，但我想切换到webpack并利用angular-cli的优势。

问题是在angular-cli.json中，我无法指定索引为index.php，它只接受HTML。

基本上，我根本无法使用这个设置启动Angular应用程序。

我该如何克服这个问题？

- paradox37

---

我正在使用 Angular2、angular-cli 和 Laravel 5.3 进行工作，但我将它们分开处理。我使用 Laravel 构建了一个 API，并用 Angular2 消费它，效果很好。为什么不采用相同的方法呢？ - Cristian Sepulveda

@CristianSepulveda 感谢您的输入 (y) - Subtain Ishfaq

@CristianSepulveda，您能否提供您正在使用的结构化演示网址？我也想要这个，但是希望在Laravel中安装Angular 4。 - sunil

Answer 1

最终我按照Cristian Sepulveda在评论中所写的方式，将Laravel和Angular 2分开。这也是推荐的做法。 我使用Laravel创建API，并与Angular 2一起使用它。

- paradox37

---

我该如何在Laravel中创建API并使用它？ - huykon225

Answer 2

在我的情况下，我使用laravel来提供angular应用程序。我仍然使用webpack来构建我的资产，但有一个gulp任务将angular index.html复制为index.blade.php，这是由laravel应用程序提供的。 我还使用gulp将构建的文件从/dist复制到/public

- S..

Answer 3

我曾经遇到过同样的问题，我发现在他们的GitHub主题上有一个相关问题：

输出文件夹将始终被完全替换。您可以使用public /文件夹来放置index.php并将其复制到输出文件夹，或者将应用程序输出到单独的文件夹并自己复制文件。

这是设计时考虑的，不会更改。这是一个构建输出文件夹，而不是部署文件夹。您应该将这两个步骤分开。

所以，您无法完全达到您想要的效果，但这是我找到的唯一解决方法。

- Kaloyan Kosev

Answer 4

我只找到了一种适合我的解决方案。

1. 通过 ng build --prod 创建客户端代码的构建版本
2. 使用 gulp 将生成的文件复制到 Laravel 的公共目录中 gulp copy（在此您可以检查旧的构建文件是否存在并将其删除）
3. 使用 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 所需的根 URL href 和来自构建的注入脚本文件。当前路由的模板文件在内部具有根元素（它通过简单的 blade yeild('content') 包含在主布局中）。

另外，您必须注意，如果您在Angular 2中使用某些HTTP请求，在将其集成到Laravel项目后，这将为每个请求添加csrf保护中间件... 如果您的一些之前可以正常工作的请求出现了新错误，请检查标头。

- Artem Zinoviev

Answer 5

由于angular-cli不允许您指定index.php，因此让它保持不变，只需指定index.html，然后在Laravel路由中添加适当的路由。例如：

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

顺便说一下，这只是针对任何未知路由的陷阱...但我想你已经有了一个想法。

- zhekaus