javascript - No se puede OBTENER /page error de enrutamiento en Angular 2

He configurado el enrutamiento en Angular que funciona perfectamente dentro de la aplicación, sin embargo, si navego a mi página de about por ejemplo a http://localhost:9000/about y actualizo la página, me aparece un error que dice "Cannot GET /about", lo mismo ocurre si abro una nueva pestaña y pego la URL allí y visito la página.

Mi archivo boot.ts que contiene la lógica de enrutamiento

// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />



//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS,
  Router,
  RouteConfig,
} from 'angular2/router';



// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';



// -- Enable production module -------------------------------------------------
enableProdMode();



// -- Component ----------------------------------------------------------------
@Component({
    selector: 'main-app',
    directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
    template: `
      <app-navbar></app-navbar>
      <router-outlet></router-outlet>
    `
})



// -- Routing ------------------------------------------------------------------
@RouteConfig([
  { path: '/', name: 'root', redirectTo: ['/Home'] },
  { path: '/home', name: 'Home', component: HomePage }
])



// -- Class --------------------------------------------------------------------
export class MainApp {
  constructor(public router: Router) {}
}



// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
  ROUTER_PROVIDERS
]);

el archivo index.html

<!doctype html>
<html lang="en">
<head>
    <base href="/">

    <meta charset="UTF-8">
    <title>Angular2 starter</title>

    <!-- Application css -->
    <link href="dist/libraries/bundle.css" rel="stylesheet"></link>
    <link href="dist/styles/main.css" rel="stylesheet"></link>
</head>

<body>
    <main-app>Loading...</main-app>

    <!-- Application js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="dist/libraries/bundle.js"></script>
</body>

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
    //configure system loader
    System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('dist/app/boot').catch(console.log.bind(console));
</script>

</html>

y estructura del proyecto

dist/
  app/
    components/
      navbar.component.js
    pages/
      home.page.js
    boot.js
  assets/
  typings/
src/
  ... original files that are compiled into dist here
index.html

Respuesta #1

En tu boot.ts, pon esto:

import { bootstrap } from "angular2/platform/browser";
import { bind } from "angular2/core";
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  bind(LocationStrategy).toClass(HashLocationStrategy)
]);

Tus URL serán con #/home

Respuesta #2

Para complementar lo que dijo Vlado, con la estrategia predeterminada necesitas una configuración del servidor para redirigir todos tus caminos a tu archivo de punto de entrada HTML. Con el enfoque de hashbang no es necesario...

Podrías echar un vistazo a estas preguntas sobre este tema:

• Cuando actualizo mi sitio web obtengo un 404. Esto es con Angular2 y Firebase
• PathLocationStrategy vs HashLocationStrategy en aplicaciones web
• ¿Está roto el enrutador de Angular 2 al usar rutas HTML5?

Espero que te ayude, Thierry