角 2 + 角 cli + Laravel 5.3答案

【问题标题】：Angular 2 + angular-cli + Laravel 5.3角 2 + 角 cli + Laravel 5.3
【发布时间】：2017-01-25 20:41:04
【问题描述】：

使用最新的 angular-cli，我创建了新项目，一切正常。接下来，我尝试将它集成到 Laravel 5.3 中。我有这个项目使用 systemjs，但我想切换到 webpack 并利用 angular-cli。

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

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

我该如何克服这个问题？

【问题讨论】：

我正在使用 angula2、angular-cli 和 laravel 5.3，但我将它们分开，我用 laravel 构建了一个 API 并用 angular2 使用它，它运行良好，你为什么不使用相同的方法？
@CristianSepulveda 感谢您的意见（y）
@CristianSepulveda 你能提供任何你正在使用的结构化 url 演示吗，我也想要这个，但 laravel 想安装 angular 4

标签： php angular laravel angular-cli

【解决方案1】：

最后，正如 Cristian Sepulveda 在评论中所写，我将 Laravel 和 Angular 2 分开了。无论如何，这是推荐的方法。

我使用 Laravel 制作 API 并将其与 Angular 2 一起使用。

【讨论】：

如何在 Laravel 中制作 API 来使用它？

【解决方案2】：

就我而言，我从 laravel 提供 Angular 应用程序。我仍然使用 webpack 来构建我的资产，但是有一个 gulp 任务，它将 angular index.html 复制为 laravel 应用程序所服务的 index.blade.php。我还使用 gulp 将构建的文件从 /dist 复制到 /public

【讨论】：

【解决方案3】：

我遇到了同样的问题，我发现这是related issue in their GitHub issues：

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

这是设计使然，不会改变。这是构建输出文件夹，而不是部署文件夹。您应该将这两个步骤分开。

因此，您无法真正实现您真正想要的，但这是我找到的唯一解决方法。

【讨论】：

【解决方案4】：

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

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 布局，其中包含 Angular 2 根 url href 和从构建中注入的脚本文件所需的内部。您当前路线的模板文件内部有根元素（它通过简单的刀片 yeild('content') 包含在主布局中）。

附：您还必须注意，如果您在 Angular 2 中使用一些 http 请求，在将其集成到 Laravel 项目后，这将为每个请求添加 csrf 保护中间件......如果您在以前有效的请求中有一些新错误，只需检查标题.

【讨论】：

【解决方案5】：

既然 angular-cli 不允许你指定 index.php，那就这样吧，只要指定 index.html 然后就可以了…… 并在 Laravel 路由中添加适当的路由。比如这个：

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

顺便说一句，这只是任何未知路线的陷阱……但我想你明白了。

【讨论】：