带有 MVC 4.5 的 Angular JS 2 在浏览器中的 url 上按 enter 显示 404 页面答案

【问题标题】：Angular JS 2 with MVC 4.5 pressing enter on the url in browser displays 404 page带有 MVC 4.5 的 Angular JS 2 在浏览器中的 url 上按 enter 显示 404 页面
【发布时间】：2016-09-29 06:17:12
【问题描述】：

这是我在 Angular JS 2 MVC4.5 应用中的 routing.ts

                import { ModuleWithProviders }  from '@angular/core';
                import { Routes, RouterModule } from '@angular/router';

                import { HomeComponent }      from './components/home/home.component';
                import { CarsComponent }      from './components/cars/cars.component';

                const appRoutes: Routes = [
                    {
                        path: 'home',
                        component: HomeComponent
                    },
                    {
                        path: 'cars',
                        component: CarsComponent
                    },
                    {
                        path: '',
                        redirectTo: '/home',
                        pathMatch: 'full'
                    },
                ];

                export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这很好用，但我在http://localhost:3000/cars上按回车

会显示404错误页面

它在服务器中搜索 localhost:3000/cars 并且服务器没有这个端点如何解决这个问题？

在服务器端服务器端WebApiConfig

                    public static class WebApiConfig
                    {
                        public static void Register(HttpConfiguration config)
                        {
                            // Web API configuration and services

                            // Web API routes
                            config.MapHttpAttributeRoutes();

                            config.Routes.MapHttpRoute(
                                name: "DefaultApi",
                                routeTemplate: "api/{controller}/{id}",
                                defaults: new { id = RouteParameter.Optional }
                            );
                        }
                    }

【问题讨论】：

您从浏览器发送的每个请求都由服务器处理。当您在地址栏中按 Enter 时，它会将请求发送到服务器。但是您在服务器中没有路径“/cars”。这就是它显示 404 错误的原因。
@ti2005 正在寻找解决办法

标签： javascript angularjs asp.net-mvc asp.net-mvc-4 angular

【解决方案1】：

尝试在Global.asax 文件中更改Application_Start 上的模块注册顺序，如下所示：

protected void Application_Start()
{
    GlobalConfiguration.Configure(WebApiConfig.Register); // this line should be placed on top of all routes
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

标准路由配置似乎干扰了 WebApi 路由（可能因为 RegisterRoutes 在您的问题上首先声明，它假定来自浏览器地址栏的所有请求都是 HTTP 请求而不是 WebApi），因此您的 WebApi 路由 localhost:3000/cars 被视为通过RegisterRoutes模块获取CarsController的方法并返回404页面。

欢迎提出任何建议。

类似问题：Web Api 404 error The resource cannot be found

【讨论】：

【解决方案2】：

这已经解决了问题

        <configuration>
          <system.web>
            <compilation debug="true" targetFramework="4.5" />
            <httpRuntime targetFramework="4.5" />
          </system.web>

          <system.webServer>
            <rewrite>
              <rules>
                <rule name="Main Rule" stopProcessing="true">
                  <match url=".*" />
                  <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  </conditions>
                  <action type="Rewrite" url="/" />
                </rule>
              </rules>
            </rewrite>
          </system.webServer>

        </configuration>

在客户端的 web.config 中添加了这个

【讨论】：