typescript - 为什么当我输入特定的 url(带有 ID 参数)时，页面无法工作并引发错误 "Uncaught ReferenceError: System is not defined"？

Question

这是我的“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)
];

这是我要加载的页面，输入网址:

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

}

我的问题是当我输入 url ".../details/12"12 作为 ID 时，但是如果我到达该页面并单击触发下面的按钮，它工作正常

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

我没有使用任何服务器，或者实际上我正在使用 Angular2 QuickStart 中的“system.config.js”，也许这就是问题所在“ Uncaught ReferenceError :系统未定义”。

Answer 1

在服务器端，你应该默认/映射你的 404 路由(基本上匹配你的 angular2 应用程序可能的路由)到你的 angular2 凝视 html(也许， index.html )

更新 1:

如果你使用 lite-server 然后如果路由不匹配那么默认的 index.html 应该返回:

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

检查 cli 参数“--entry-file=PATH”(这应该为这个特定文件提供服务以代替丢失的路由):

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

同时回顾这个问题:Angular 2.0 router not working on reloading the browser

您还可以使用本地 bs-config.json 或 bs-config.js 文件配置高级行为。

了解更多详情:https://www.npmjs.com/package/lite-server