Why when I type a specific url (with a ID param) the page doesn't work raising up thi error "Uncaught ReferenceError: System is not defined"?

Question

This is my "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)
];

This is the page I want to load typing in the url:

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

}

My problem is when I type into the url ".../details/12" 12 as ID, but if I reach that page clicking on button that triggers this below, it works fine

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

I'm not using any server, or actually I'm using "system.config.js" from Angular2 QuickStart, maybe that's where the problem is coming "Uncaught ReferenceError: System is not defined".

Answer 1

On the server side you should default/map your 404 route (basically to match your angular2 app possible routes) to your angular2 staring html (maybe, index.html )

UPDATE1:

If you use lite-server then if a route is not matched then the default the index.html should be return:

When creating a SPA there are routes that are only known to the browser. For example, /customer/21 may be a client side route for an Angular app. If this route is entered manually or linked to directly as the entry point of the Angular app (aka a deep link) the static server will receive the request, because Angular is not loaded yet. The server will not find a match for the route and thus return a 404. The desired behavior in this case is to return the index.html (or whatever starting page of the app we have defined). BrowserSync does not automatically allow for a fallback page. But it does allow for custom middleware. This is where lite-server steps in. lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs

Check the cli parameter "--entry-file=PATH" (this should serve this the specific file in place of missing route) :

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

Review also this question: Angular 2.0 router not working on reloading the browser

you can also configure advance behaviours using local bs-config.json or bs-config.js files.

for more details: https://www.npmjs.com/package/lite-server