角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錯誤

回答

相關問題