Angular2 : 404 response using activatedRoute and switchmap

Question

Method for fetching the selected users details inside service is : 'getSelectedUser(name)', which uses an Observable and in the required component we are calling that service and applying switchMap and then subscribing to it. But somehow it's not getting subscribed it's throwing 404 on console. Kindly guide in getting that response without any error.

Expected Output is : When we click on particular user, it should redirect to about/username (here: about/Kylie) displaying Kylie's entire detail.

Here is my code:

about.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonService } from "./app.service";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
    selector: 'about-comp',
    template: `
                <div *ngIf="users">
                    <div class="col-sm-4" *ngFor="let user of users">
                        <div class="content" [routerLink]="['/about',user.name]">
                            <h2>{{user.name}}</h2>
                        </div>
                    </div>
                </div>
    `,
    styles: [ `
        .content {
            background: #f3f3f3;
            border-radius: 4px;
            padding: 30px;
            text-align: center;
        }

    `]
})

export class AboutComponent implements OnInit {
    private users;

    constructor(private _cService: CommonService,
    private _activatedRoute: ActivatedRoute, 
    private _router:Router) {}
    ngOnInit() {
        this._cService.getUsers().subscribe(
            responseUsers => this.users = responseUsers
        )
    }


}

about-user.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from "@angular/router";
import { CommonService } from "./app.service";
import { Location } from '@angular/common';
import 'rxjs/add/operator/switchMap';

@Component({
    selector: 'about-user-comp',
    template:  `
                <div *ngIf="selectedUser">
                    {{selectedUser}} is the selected user  <br>
                    <button class="btn btn-primary" (click)="goBack()"> Go Back </button>
                </div>
                <div *ngIf="!selectedUser">jhjkchd</div>
    `
})

export class AboutUserComponent implements OnInit {
    private selectedUser;
    constructor(private _cService: CommonService,
    private _activatedRoute: ActivatedRoute, 
    private _router:Router,
    private _location: Location) {}
    ngOnInit() {
        //Using snapshot
        // let user = this._activatedRoute.snapshot.params['name'];
        // this.selectedUser = user;

        //Using Observable
        this._activatedRoute.params.switchMap((param:Params) => this._cService.getSelectedUser(param['name']))
            .subscribe(resp => {
                this.selectedUser = resp
                console.log(resp);
            } 
        )
    }

    goBack() {
        this._location.back();
    }
}

app.service.ts

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";
import { Users } from "./user";


@Injectable()

export class CommonService {
    constructor(private _http: Http) {}

    private UserUrl = 'api/Users';

    getUsers() : Observable<Users[]> {
        return this._http.get(this.UserUrl).map(
            respUsers => respUsers.json().data as Users[]
        )
    }

    getSelectedUser(name:string) : Observable<Users> {
        const selUser = `${this.UserUrl}/${name}`;
        return this._http.get(selUser).map(
            response => response.json().data as Users
        )
    }
}

in-memory.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class MemoryDataService implements InMemoryDbService {
    createDb() {
        const Users = [
           {"id": 1, "name":"Chris", "gender":"M"},
           {"id": 2, "name":"Kylie", "gender":"F"},
           {"id": 3, "name":"Christina", "gender":"F"},
        ];
        return { Users };
    }
}

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from "@angular/core";
import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";
import { ContactsComponent } from "./contacts.component";
import { AboutUserComponent } from "./about-user.component";

export const appRoutes = [
    {path: 'home', component: HomeComponent },
    {path: 'about', component: AboutComponent},
    {path: 'contacts', component: ContactsComponent},
    {path: 'about/:name', component: AboutUserComponent}
];

export const AppRouting : ModuleWithProviders = RouterModule.forRoot(appRoutes);

Here are the Screenshots: First Screen
Error screen after clicking on Kylie user