Kann nicht GET/Seite Winkel 2 Routing-Fehler

Ich habe Routing in eckigen das funktioniert einwandfrei in der Anwendung funktioniert, aber wenn ich zu meiner Seite so zum Beispiel so http://localhost:9000/about navigieren und die Seite aktualisieren, bekomme ich Fehler "Cannot GET /about", passiert gleich wenn ich einen neuen Tab öffne und URL dort einfüge und die Seite besuche.Kann nicht GET/Seite Winkel 2 Routing-Fehler

Meine boot.ts Datei containint Routing-Logik

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

die Datei 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>

und Projektstruktur

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

Quelle

2016-01-28 Ilja

See: http://stackoverflow.com/questions/34541532/is-angular-2s-router-broken-when-using-html5-routes – Langley

In Ihrem boot.ts, setzen diese:

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

wird Ihre URL mit #/home sein

Quelle

2016-01-28 17:45:01

was ist, wenn ich dies nicht tun brauche ich dieses # in meiner URL anmelden? Gibt es eine Alternative? –

Ja, natürlich gibt es PathLocationStrategy in Angular2, aber es erfordert auch serverseitige Änderungen. –

genau das ist das Problem, das ich in meiner Code-Server-Seite Änderung habe. Danke –

Zur Ergänzung was Vlado sagte, mit der Standard-Strategie, die Sie eine Serverkonfiguration müssen alle Pfade umleiten zu Ihrer HTML-Einstiegspunktdatei. Mit dem Hash-Bang-Ansatz ist es nicht notwendig ...

Sie einen Blick auf diese Fragen zu diesem Problem haben könnte:

Hoffe, es hilft Sie, Thierry

Quelle

2016-01-28 18:08:10

ermöglichen Hashes mit Ihren Routen

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

Quelle

2017-06-21 11:11:09

Kann nicht GET/Seite Winkel 2 Routing-Fehler

Antwort

Verwandte Themen