角2路由404错误

你好，我采用了棱角分明2.然而，当我得到一个404错误读取试图路线从网页不同的画面：角2路由404错误

GET http://localhost:5000/map/1 404（未找到）

该应用程序在后端集成了ASP.NET Core。

两个问题：

（1）我需要在MVC控制器，以及一个方法说像

[Route("api/map")] 
public IActionResult Map() 
{ 
    return View(); 
}

（2）是否有什么错我的角度路由？

app.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { MapComponent } from './components/map/map.component'; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'map/:id', component: MapComponent }, 
    { path: 'fetch-data', component: FetchDataComponent }, 
    { path: '**', redirectTo: 'home' } 
]; 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     MapComponent, 
     FetchDataComponent, 
     HomeComponent 
    ], 
    imports: [ 
     UniversalModule, 
     RouterModule.forRoot(appRoutes) 
    ] 
}) 
export class AppModule { 
}

map.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MapService } from './../map.service'; 

@Component({ 
    selector: 'map-root', 
    templateUrl: 'map.component.html', 
    providers: [MapService] 
}) 

export class MapComponent implements OnInit { 
    constructor(public _mapService: MapService) { } 
    public images: [any]; 
    ngOnInit() { 

    } 

}

map.component.html

<h1>This is a test</h1>

的index.html

@{ 
    ViewData["Title"] = "Home Page"; 
} 

<base href="/" /> 
<app class="container" style="display: block;">Loading...</app> 
<script src="~/dist/vendor.js" asp-append-version="true"></script> 
@section scripts { 
    <script src="~/dist/main-client.js" asp-append-version="true"></script> 
}

个

的web.config

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 

    <!-- 
    Configure your application settings in appsettings.json. Learn more at https://go.microsoft.com/fwlink/?LinkId=786380 
    --> 

    <system.webServer> 
    <rewrite> 
     <rules> 
     <rule name="AngularJS Routes" 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_URI}" pattern="^/(api)" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/index.html" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 
</configuration>

来源

2017-04-13 RyeGuy

的角本文档包括在这里：https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html#!#build-and-run

这里：https://angular.io/docs/ts/latest/guide/deployment.html#!#server-configuration

这是一个片段：

对于使用路由如果您的应用程序应用程序使用路由，您需要教导服务器总是返回index.html当用户要求HTML 页面的原因部署指南中解释的原因。

当你在应用程序中移动时，一切似乎都很好。但是，如果刷新浏览器或将链接粘贴到浏览器地址栏中的应用程序页面（称为“深层链接”），您将立即发现问题。

对于除/或/index.html之外的任何地址，您很可能会从服务器中收到404 - Page Not Found响应。

您必须将服务器配置为返回index.html以请求这些“未知”页面。 lite-server开发服务器可以立即使用。如果您已切换到F5和IIS，则必须将配置为执行此操作。本节将逐步介绍适用于QuickStart应用程序的。

来源

2017-04-14 00:23:43 DeborahK

这非常有道理。我的元素在布局视图中不是索引。但是，我已经实施了您的文档中建议的代码，并且仍然收到错误。我已将修改添加到我的帖子中。任何见解都会很棒。Thx – RyeGuy

嗨RyeGuy，你有这个工作。将应用程序移动到服务器后，我面临同样的问题。它可以正常工作，如果我访问index.html，就像这样：'myserver.com/appVirtualDir/index.html'。如果我尝试直接访问路由（'myserver.com/appVirtualDir/mainview'），它将显示404。 – Deepak

角2路由404错误

回答

相关问题