Angular 2 Routing 404 error

Question

Hello I am trying to route to a different screen from the homepage using Angular 2. However when I am getting a 404 error that reads:

GET http://localhost:5000/map/1 404 (Not Found)

The application integrates ASP.NET Core on the backend.

Two questions:

(1) Do I need a method in a MVC controller as well that says something like

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

(2) Is there something wrong with my angular routing?

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

The Angular docs cover this here: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html#!#build-and-run

and here: https://angular.io/docs/ts/latest/guide/deployment.html#!#server-configuration

This is a snippet:

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.

• RyeGuy: This makes perfect sense. My <base href="/" /> element was in the Layout View not the Index. However I have implemented the code suggested in your docs and am STILL getting the error. I have added the edits to my post. Any insight would be wonderful. Thx
• Deepak: Hi RyeGuy, Did you get this working. I'm facing the same problem, after moving the application to the server. It works fine if I access index.html, like so: myserver.com/appVirtualDir/index.html. If I try to directly access routes (myserver.com/appVirtualDir/mainview), it shows 404.