Errore GET/pagina angolare 2

Ho impostato il routing in modo angolare che funziona perfettamente all'interno dell'applicazione, tuttavia se si naviga alla pagina relativa, ad esempio, così e si aggiorna la pagina Viene visualizzato errore "Cannot GET /about", lo stesso accade se apro una nuova scheda e incollo l'URL lì e visito la pagina.Errore GET/pagina angolare 2

Il mio file boot.ts logica di routing containint

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

il file 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>

e progetto di struttura

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

fonte

2016-01-28 Ilja

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

Nei tuoi boot.ts, mettere questo:

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

del tuo URL sarà con #/home

fonte

2016-01-28 17:45:01

cosa se non lo faccio bisogno di questo # segno nel mio URL? c'è qualche alternativa? –

Sì, naturalmente, c'è PathLocationStrategy in Angular2, ma richiede anche modifiche sul lato server. –

esattamente questo è il problema che ho nella mia modifica lato server di codice. grazie –

Per completare ciò che ha detto Vlado, con la strategia di default è necessario una configurazione di server per reindirizzare tutti i tuoi sentieri al tuo file di punti di ingresso HTML. Con l'approccio hashbang non è necessario ...

Si potrebbe avere uno sguardo a queste domande su questo problema:

Speranza che aiuta you, Thierry

fonte

2016-01-28 18:08:10

consentono hash con i tuoi percorsi

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

fonte

2017-06-21 11:11:09

Errore GET/pagina angolare 2

risposta

Problemi correlati