角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>
的角本文档包括在这里: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应用程序的 。
这非常有道理。我的 元素在布局视图中不是索引。但是,我已经实施了您的文档中建议的代码,并且仍然收到错误。我已将修改添加到我的帖子中。任何见解都会很棒。Thx –
RyeGuy
嗨RyeGuy,你有这个工作。将应用程序移动到服务器后,我面临同样的问题。它可以正常工作,如果我访问index.html,就像这样:'myserver.com/appVirtualDir/index.html'。如果我尝试直接访问路由('myserver.com/appVirtualDir/mainview'),它将显示404。 – Deepak