Angular 2 + angular-cli + Laravel 5.3
Angular 2 + angular-cli + Laravel 5.3
使用最新的 angular-cli，我创建了新项目并且一切正常。接下来，我尝试将其整合到Laravel 5.3中。我有这个项目使用 systemjs，但我想切换到 webpack 并利用 angular-cli.
问题是在angular-cli.json中我不能指定索引是index.php，它只接受HTML.
基本上，使用此设置我根本无法启动 Angular 应用程序。
我该如何克服这个问题？
我遇到了同样的问题，我发现的是这个 related issue in their GitHub issues:
The output folder will always be entirely replaced. You can use the public/ folder to have your index.php which will be copied to your output folder, or output the app to a separate folder and copy the files yourself.
This is by design and will not change. This is a build output folder, not a deploy folder. You should separate those two steps.
所以，您无法真正实现您真正想要的，但这是我找到的唯一解决方法。
在我的例子中，我从 laravel 提供 angular 应用程序。我仍然使用 webpack 来构建我的资产，但是有一个 gulp 任务将 angular index.html 复制为 index.blade.php，laravel 应用服务。
我还使用 gulp 将构建的文件从 /dist 复制到 /public
我只找到了一个解决方案。
- 通过
ng build --prod 为客户端代码创建构建
- 使用 gulp 将生成的文件复制到 Laravel public 目录
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 根 url href 所需的内部布局以及来自构建的注入脚本文件。并且当前路由的模板文件内部有根元素（它通过简单的 blade yeild('content')).
包含到主布局中
P.S。您还必须注意，如果您在 angular 2 中使用一些 http 请求，在将其集成到 Laravel 项目后，这将为每个请求添加 csrf 保护中间件...如果您有一些新错误在以前工作的请求中，只需检查 headers.
既然angular-cli不允许你指定index.php，那就这样吧，只需指定index.html然后...
并在 Laravel 路由中添加适当的路由。比如这个：
Route::any('{path?}', function () {
return File::get(public_path() . '/index.html');
})->where("path", ".+");
顺便说一句，这只是一个未知路线的陷阱……但我想你明白了。
最后我将 Laravel 和 Angular 2 分开，正如 Cristian Sepulveda 在评论中所写的那样。无论如何，这是推荐的方法。
我用 Laravel 制作 API 并用 Angular 2.
使用最新的 angular-cli，我创建了新项目并且一切正常。接下来，我尝试将其整合到Laravel 5.3中。我有这个项目使用 systemjs，但我想切换到 webpack 并利用 angular-cli.
问题是在angular-cli.json中我不能指定索引是index.php，它只接受HTML.
基本上，使用此设置我根本无法启动 Angular 应用程序。
我该如何克服这个问题？
我遇到了同样的问题，我发现的是这个 related issue in their GitHub issues:
The output folder will always be entirely replaced. You can use the public/ folder to have your index.php which will be copied to your output folder, or output the app to a separate folder and copy the files yourself.
This is by design and will not change. This is a build output folder, not a deploy folder. You should separate those two steps.
所以，您无法真正实现您真正想要的，但这是我找到的唯一解决方法。
在我的例子中，我从 laravel 提供 angular 应用程序。我仍然使用 webpack 来构建我的资产，但是有一个 gulp 任务将 angular index.html 复制为 index.blade.php，laravel 应用服务。 我还使用 gulp 将构建的文件从 /dist 复制到 /public
我只找到了一个解决方案。
- 通过
ng build --prod 为客户端代码创建构建
- 使用 gulp 将生成的文件复制到 Laravel public 目录
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 根 url href 所需的内部布局以及来自构建的注入脚本文件。并且当前路由的模板文件内部有根元素（它通过简单的 blade yeild('content')).
包含到主布局中P.S。您还必须注意，如果您在 angular 2 中使用一些 http 请求，在将其集成到 Laravel 项目后，这将为每个请求添加 csrf 保护中间件...如果您有一些新错误在以前工作的请求中，只需检查 headers.
既然angular-cli不允许你指定index.php，那就这样吧，只需指定index.html然后...
并在 Laravel 路由中添加适当的路由。比如这个：
Route::any('{path?}', function () {
return File::get(public_path() . '/index.html');
})->where("path", ".+");
顺便说一句，这只是一个未知路线的陷阱……但我想你明白了。
最后我将 Laravel 和 Angular 2 分开，正如 Cristian Sepulveda 在评论中所写的那样。无论如何，这是推荐的方法。
我用 Laravel 制作 API 并用 Angular 2.