HTML5 使用 ASP.Net Core MVC 和 ASP.Net Web Api 在 Angular2 应用程序中进行路由

Question

我正在使用 ASP.Net Core MVC 和 ASP.Net Web Api.

开发 Angular2 应用程序

这是我的基本架构。

ASP.Net 核心 MVC 项目 (MyProject.Web)

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

ASP.Net 网站 Api 项目 (MyProject.Api) - 每个Controllers指定一个entity的CRUD操作，响应Angular2的http

问题：我无法使用 HTML5 路由并且被迫散列路由，因为 html5 路由调用服务器而我的 MVC 项目确实如此没有相应的控制器。所以服务器没有 return 任何东西。

Answer 1

如果打算在IIS上使用，可以使用URL重写模块。它基本上告诉 Web 服务器将所有路由 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>

Answer 2

Problem: I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything.

在路由路径中添加 # 可能是像您这样的情况下最常见的解决方案，但是...

将 MVC 与 Angular 一起使用是否有任何特殊原因？

在我看来，您不需要 MVC - 您可以只创建 empty ASP.NET 核心项目并添加到您的 HTML/Angular 应用程序中 - 干净、简单、舒适且MVC 和 Angular 之间没有冲突 ;)

将您的文件（包括 index.html）添加到 wwwroot 并更新您的 Startup.cs 文件：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
            app.UseDefaultFiles(); <- Add this line before UseStaticFiles
            app.UseStaticFiles();            
    }
}

请查找更多信息：

Answer 3

"I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything"

https://github.com/aspnet/JavaScriptServices

查找路由助手 aka spa 服务 nuget 和 spa 回退路由。

当找不到服务器端路由并且路由没有文件扩展名时，index.html 应该返回给客户端，其中当前路由被 angular 路由器解释为客户端路由。

HTML5 使用 ASP.Net Core MVC 和 ASP.Net Web Api 在 Angular2 应用程序中进行路由

HTML5 routing in Angular2 App with ASP.Net Core MVC and ASP.Net Web Api

asp.net-core-mvc

asp.net-core-webapi

angular