Reputation: 3717

Angular Routing not working when I manualy add parameter in url

I have created HeroApp in which I display list of Heros from a Service, following this tutorial.

When the user selects any Hero, details of that particular Hero are displayed. However, when I manually append the hero id to url as follows, I get an error:

GET http://localhost:3000/persons/node_modules/core-js/client/shim.min.js
GET http://localhost:3000/persons/systemjs.config.js
GET http://localhost:3000/persons/node_modules/zone.js/dist/zone.js
GET http://localhost:3000/persons/node_modules/reflect-metadata/Reflect.js
GET http://localhost:3000/persons/node_modules/systemjs/dist/system.src.js
GET http://localhost:3000/persons/systemjs.config.js
Uncaught ReferenceError: System is not defined

Here is my code:

app.personList.ts:

import { Component } from '@angular/core';
import { Person } from "../model/peopleModel";
import { PeopleService } from "../services/app.peopleListService";

@Component({
  selector: 'app-people-list',
  templateUrl: './peoplelist/app.peopleList.html'
})
export class PeopleListComponent {
  people: Person[] = [];
  selectedPerson: Person;

  constructor(peopleService : PeopleService){
    this.people = peopleService.getAll();
  }

  personSelect(person : Person)
  {
    this.selectedPerson = person;
  }
}

app.personList.html

<ul>
    <ul>
    <li *ngFor="let person of people">
        <a [routerLink]="['/persons', person.id]">
            {{person.name}}
        </a>
    </li>
</ul>

When the user clicks on a hero it shows the details of the Hero and the url changes to:

http://localhost:3000/persons/2

app.personDetail.ts:

import { Component, Input, OnInit, OnDestroy } from "@angular/core";
import { Person } from "../model/peopleModel";
import { PeopleService } from "../services/app.peopleListService";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: 'app-person-details',
  templateUrl: '/persondetail/app.peopleDetail.html'
})

export class PeopleDetail implements OnInit, OnDestroy{
    @Input() person : Person;
    sub: any;

    constructor(private peopleService: PeopleService,
               private route: ActivatedRoute, private router: Router){
    }
    ngOnInit(){
        this.sub = this.route.params.subscribe(params => {
          let id = Number.parseInt(params['id']);
          this.person = this.peopleService.get(id);
        });
    }

    ngOnDestroy(){
        if(!!this.sub){
        this.sub.unsubscribe();
      }
    }

    gotoPeoplesList(){
    let link = ['/persons'];    
      this.router.navigate(link);
  }
}

app.personDetail.html:

<section *ngIf="person">
    <h2>You selected: {{person.name}}</h2>
    <h3>Description</h3>
    <p>
       {{person.name}} weights {{person.weight}} and is {{person.height}} tall.
    </p>
</section>

<button (click)="gotoPeoplesList()">Back to peoples list</button>

routing.ts:

import { PeopleListComponent } from "./peoplelist/app.peopleList";
import { Routes, RouterModule } from '@angular/router';
import { PeopleDetail } from "./persondetail/app.peopleDetail";

const routes: Routes = [
  // map '/persons' to the people list component
  {
    path: 'persons',
    component: PeopleListComponent,
  },
  // map '/' to '/persons' as our default route
  {
    path: 'persons/:id',
    component: PeopleDetail
  },
  {
    path: '',
    redirectTo: '/persons',
    pathMatch: 'full'
  },
];

export const appRouterModule = RouterModule.forRoot(routes);