Angular 2 路由404错误

Question

您好，我正在尝试使用 Angular 2 从主页路由到不同的屏幕。但是，当我收到 404 错误时：

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

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

两个问题：

(1) 我是否还需要 MVC 控制器中的一个方法来表达类似

的内容

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

(2) 我的 angular 路由有问题吗？

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

Angular 文档在此处介绍：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

这是一个片段：

For apps that use routing If your app uses routing, you need to teach the server to always return index.html when the user asks for an HTML page for reasons explained in the Deployment guide.

Everything seems fine while you move about within the app. But you'll see the problem right away if you refresh the browser or paste a link to an app page (called a "deep link") into the browser address bar.

You'll most likely get a 404 - Page Not Found response from the serer for any address other than / or /index.html.

You have to configure the server to return index.html for requests to these "unknown" pages. The lite-server development server does out-of-the-box. If you've switched over to F5 and IIS, you have to configure IIS to do it. This section walks through the steps to adapt the QuickStart application.

Angular 2 路由404错误

Angular 2 Routing 404 error

angular2-routing

angular