当我在url中手动添加参数时，Angular Routing无法正常工作

我创建了HeroApp，其中我在服务中显示了Heros列表，遵循this tutorial .

当用户选择任何Hero时，将显示该特定Hero的详细信息 . 但是，当我手动将英雄ID附加到url时，我得到一个错误：

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未捕获的ReferenceError：系统未定义

这是我的代码：

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>

当用户点击英雄时，它会显示Hero的详细信息，并且网址会更改为：

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);