AspNetCore.SpaServices Angular2将基本URL设置为子目录以进行预渲染

时间:2017-06-21 00:08:25

标签: angular asp.net-core single-page-application

我目前正在开发基于Microsoft.AspNetCore.SpaServices中包含的SPA Angular应用程序模板的项目。有关模板的信息,请访问https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

开箱即用,解决方案直接插入MVC管道,并将未映射到现有路径或物理文件的任何URL重定向到预渲染并提供Angular2应用程序的控制器。

我尝试做的是将所有这些工作与应用程序中的子目录一起作为Angular应用程序的唯一入口点和根目录。

到目前为止我做了什么:(这基于SPA Angular模板以及证明问题的最低限度!)

  1. 从Microsoft SPA模板dotnet new angular -n DashboardTest创建一个新项目(dotnet new --install Microsoft.AspNetCore.SpaTemplates::*以安装模板包)
  2. Startup.cs删除了所有路由,并替换为app.UseMvc();。这意味着只会映射我明确定义的路线。
  3. [Route("/dashboard/{*angularRoute}")]上的Index()操作添加了HomeController属性,以捕获对我选择的/dashboard子目录的所有请求,并预渲染角度应用(Home/Index 1}}视图已包含<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>用于预渲染。)
  4. _Layout.cshtml中的基本href标记更新为<base href="/dashboard" />,以正确配置角度应用以将/dashboard视为其根目录。
  5. 此时一切看起来都很漂亮,但是在幕后,预渲染已经破裂。要证明这一点,请加载view-source:http://localhost:5000/dashboard/counter(在Chrome中) - 您会看到呈现的输出实际上是/home路线,而不是预期的/counter路线。

    那么,如何配置SpaServices,更具体地说是<app asp-prerender-module="ClientApp/dist/main-server"> TagHelper,以将角度应用程序基于与应用程序根目录不同的子目录?

    我已经开始在https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering挖掘源代码,试图找出预渲染器获取基本网址的位置,但我无法弄明白。任何帮助将不胜感激。

    为了记录,我这样做是为了让我能够干净地扩展现有的MVC应用程序,以便在没有大量重构的情况下使用Angular2获得新功能。还有可能在同一个Web应用程序中运行多个Angular2应用程序,这可能会在以后发挥作用。

0 个答案:

没有答案