angular - 使用 ASP.Net Core MVC 和 ASP.Net Web Api 在 Angular2 App 中进行 HTML5 路由

Question

我正在使用 ASP.Net Core MVC 和 ASP.Net Web Api 开发 Angular2 应用程序。

这是我的基本架构。

ASP.Net Core MVC 项目 (MyProject.Web)

• Nuget、npm 和 bower 用于依赖项。 Bower 用于将 npm 依赖项从 node_modules 复制到 wwwroot/libs/
• Home/Index Controller 的操作提供加载 Angular2 和其他依赖项的第一个页面。
• 模板从 ActionMethods 加载，即 Home/About
• SystemJS 加载模块。
• Angular2 的 http 服务调用 ASP.Net Web Api 项目(一个独立于 mvc 的项目)

ASP.Net Web Api 项目 (MyProject.Api) - 每个Controllers指定一个实体的CRUD操作，以及对Angular2的http的响应

问题:我无法使用 HTML5 路由并且被迫散列路由，因为 html5 路由调用服务器并且我的 MVC 项目没有相应的 Controller 。所以服务器不返回任何东西。

Answer 1

如果你打算在IIS上使用，你可以使用URL重写模块。它基本上告诉网络服务器将所有路由 URL 重写为 index.html。 .

<?xml version="1.0" encoding="utf-8"?>
<system.webServer>
   <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule"
resourceType="Unspecified"/>
   </handlers>
   <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%"
stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout"
forwardWindowsAuthToken="false" />
      <rewrite>
         <rules>
            <rule name="Angular 2 pushState routing" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/index.html" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>