typescript - Hvorfor fungerer ikke siden når jeg skriver en spesifikk URL (med en ID-param) og gir denne feilen «Uncaught ReferenceError: System is not defined»?

Dette er min «app.routing.ts»:

import {provideRouter, RouterConfig} from "@angular/router";

import {DashboardComponent} from "./dashboard.component";
import {HeroesComponent} from "./heroes.component";
import {HeroDetailsComponent} from "./hero-details.component";

export const routes: RouterConfig = [
    {path: '',            component: DashboardComponent },
    {path: 'dashboard',   component: DashboardComponent },
    {path: 'heroes',      component: HeroesComponent },
    {path: 'details/:id', component: HeroDetailsComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

Dette er siden jeg vil laste inn ved å skrive inn URL-en:

import {Component, OnInit}  from "@angular/core";
import {Router, ActivatedRoute} from "@angular/router";

import {Hero}       from "./hero.class";
import {HeroService} from "./hero.service";

@Component({
    selector    : "my-hero-details",
    template    : `
        <div *ngIf="myhero">
            <h2>{{myhero.name}} details!</h2>
            <div><label>id: </label>{{myhero.id}}</div>
            <div>
                <label>name: </label>
                <input id="heroname" [(ngModel)]="myhero.name" placeholder="name">
            </div>
      </div>
      <button (click)="goBack()">Back</button>
    `,
    providers   : [HeroService]
})

export class HeroDetailsComponent implements OnInit{

    myhero:Hero;
    sub:any;

    ngOnInit(){
        this.getHeroDetails();
    }

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

    constructor(private heroService:HeroService, private router:Router, private route:ActivatedRoute){}

    getHeroDetails(){

       this.sub = this.route.params.subscribe((param)=>{
           let id:number = +param["id"];
           //let id:number = +this.route.snapshot.params["id"];
           this.heroService.getHero(id).then((hero)=>{
               this.myhero = hero;
           });

        });

    }

    goBack(){
        window.history.back();
    }

}

Problemet mitt er når jeg skriver inn i URL-en ".../details/12" 12 som ID, men hvis jeg kommer til den siden ved å klikke på en knapp som utløser dette nedenfor, fungerer det fint

this.router.navigate(["/details", this.selectedHero.id]);

Jeg bruker ikke noen server, eller egentlig bruker jeg "system.config.js" fra Angular2 QuickStart, kanskje det er der problemet kommer fra "Uncaught ReferenceError: System is not defined".

Svar #1

På serversiden bør du som standard/mappe din 404-rute (i utgangspunktet for å matche de mulige rutene i Angular2-appen din) til din Angular2-start HTML (kanskje index.html)

OPPDATERING1:

Hvis du bruker lite-server, så hvis en rute ikke blir matchet, bør standarden index.html returneres:

Når man lager en SPA finnes det ruter som kun er kjent for nettleseren. For eksempel kan /customer/21 være en klient-side rute for en Angular-applikasjon. Hvis denne ruten skrives inn manuelt eller lenkes til direkte som inngangspunkt for Angular-applikasjonen (også kalt en dyp lenke), vil den statiske serveren motta forespørselen, fordi Angular ennå ikke er lastet. Serveren vil ikke finne en match for ruten og vil dermed returnere en 404. Ønsket oppførsel i dette tilfellet er å returnere index.html (eller hvilken som helst startside av appen vi har definert). BrowserSync tillater ikke automatisk en fallback-side, men det tillater tilpasset mellomvare. Dette er hvor lite-server kommer inn. lite-server er en enkel tilpasset wrapper rundt BrowserSync som gjør det enkelt å servere SPAs.

Sjekk CLI-parameteren "--entry-file=PATH" (dette skal brukes for å serve denne spesifikke filen i stedet for manglende rute):

live-server --entry-file=index.html

Vurder også dette spørsmålet: Angular 2.0-ruter fungerer ikke når nettleseren lastes på nytt

Du kan også konfigurere avanserte handlinger ved å bruke lokale bs-config.json- eller bs-config.js-filer.

for mer informasjon: https://www.npmjs.com/package/lite-server