각도 2 라우팅 404 오류

Question

내가 읽고 404 오류가 무엇입니까 그러나 때 각도 (2)를 사용하여 홈페이지에서 다른 화면으로 경로에 노력하고 안녕하세요 :

가 (찾을 수 없음) http://localhost:5000/map/1 404 GET

을

응용 프로그램은 ASP.NET 코어를 백엔드에 통합합니다.

두 질문 :

(1) 내가 필요하십니까

같은

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

(2) 내 각 라우팅에 문제가 말한다뿐만 아니라 MVC 컨트롤러의 방법은?

가 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> 

Answer 1

각 문서는이 여기에 포함 : 여기 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

이것은 조각입니다 : 경우 라우팅을 사용하는 앱에 대한

당신의 앱에서 라우팅을 사용하는 경우사용자가 HTML을 요청할 때 서버가 항상 index.html을 반환하도록 가르쳐야합니다.페이지를 참조하십시오.

앱 내에서 이동하는 동안 모든 것이 잘 보입니다. 그러나 브라우저 주소창에 브라우저를 새로 고치거나 앱 페이지 ('딥 링크'라고 함)에 링크를 붙여 넣으면 즉시 번 문제를 보게됩니다.

/또는 /index.html 이외의 주소에 대해서는 의 404 - 페이지를 찾을 수 없음 응답을받을 가능성이 큽니다.

이러한 "알 수없는"페이지 에 대한 요청의 경우 index.html을 반환하도록 서버를 구성해야합니다. 라이트 서버 개발 서버는 바로 입니다. F5와 IIS로 전환 한 경우 IIS를 구성해야합니다. 이 섹션에서는 QuickStart 응용 프로그램을 적용하는 단계를 안내합니다.