Question

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

获取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>

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

这是一个片段：

对于使用路由的应用如果您的应用使用路由，则需要教授   服务器在用户请求HTML时始终返回index.html   页面上有部署指南中说明的原因。

当你在应用程序中移动时，一切似乎都很好。但是你呢   如果刷新浏览器或粘贴链接，请立即查看问题   到浏览器地址栏中的应用页面（称为＆＃34;深层链接＆＃34;）。

您很可能会从服务器上获得404 - Page Not Found响应   对于/或/index.html以外的任何地址。

您必须将服务器配置为返回index.html以获取请求   这些＆＃34;未知＆＃34;页面。精简版服务器开发服务器   盒子外面。如果您已切换到F5和IIS，则必须这样做   配置IIS来做到这一点。本节将介绍适应的步骤   QuickStart应用程序。

Angular 2 Routing 404错误

1 个答案: