Routing angolare 2 e accesso diretto a una rotta specifica: come configurare Apache?

Ho sviluppato una piccola app di prova Angular2 che, tra le altre caratteristiche, sfrutta il routing.Routing angolare 2 e accesso diretto a una rotta specifica: come configurare Apache?

Funziona correttamente finché l'utente accede per la prima volta alla pagina iniziale, quindi passa alle pagine secondarie.

Se l'utente tenta di accedere direttamente a una sottopagina, ho un 404 se non configuro il server web. Questo è perfettamente normale in quanto non esiste una "pagina reale" corrispondente alla rotta.

ho cercato di aggiungere la seguente configurazione di Apache 2.2 per gestire HTML5 push Stato:

<Directory /var/www/html/angular2-sens> 
    Options Indexes FollowSymLinks 
    RewriteEngine On 
    RewriteBase /angular2-sens 
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /angular2-sens/index.html [L] 
</Directory>

rende le cose meglio come non ho più un 404. Tuttavia, sono "solo" reindirizzati alla home dell'app e il routing non vengono eseguiti.

Cosa devo fare per correggere questo?

La mia pagina index.html è:

<html> 

<head> 
    <title>Angular 2 QuickStart</title> 

    <link rel="stylesheet" href="simplegrid.css" type="text/css"> 
    <link rel="stylesheet" href="sen.css" type="text/css"> 

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.js"></script> 
    <script src="node_modules/angular2/bundles/http.js"></script> 
    <script src="node_modules/angular2/bundles/router.js"></script> 
<!-- dev 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
--> 

    <!-- 2. Configure SystemJS --> 
    <script> 
    System.config({ 
     map: { 
      rxjs: 'node_modules/rxjs' //or wherever you have it installed 
     }, 
     packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     } 
     } 
    }); 
    System.import('app/boot') 
    .then(null, console.error.bind(console)); 
    </script> 

</head> 

<!-- 3. Display the application --> 
<body> 
    <app>Chargement...</app> 
</body> 
<script>document.write('<base href="' + document.location + '" />');</script> 
</html>

mia app/boot.ts è:

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 

import { enableProdMode } from 'angular2/core'; enableProdMode(); 

bootstrap(AppComponent, [HTTP_PROVIDERS,ROUTER_PROVIDERS]);

E, infine, la mia componente APP è:

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 

import { enableProdMode } from 'angular2/core'; enableProdMode(); 

bootstrap(AppComponent, [HTTP_PROVIDERS,ROUTER_PROVIDERS]);

mio componente dell'app, in cui è configurato il routing, è:

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {SensComponent} from './sens.component'; 
import {GroupesPolitiquesComponent} from './groupes-politiques.component'; 
import {SenVignetteComponent} from './sen-vignette.component'; 

@Component({ 
    selector: 'app', 
    template: ` 
<h1>Application Angular 2 Relative aux Sénateurs (AA2RSen)</h1> 
<nav> 
    <a [routerLink]="['Senateurs']">Tous les Sénateurs en cours de mandat</a> 
    <a [routerLink]="['GroupesPolitiques']">Groupes politiques</a> 
</nav> 
<router-outlet></router-outlet> 
`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
{path:'/senateurs', name: 'Senateurs', component: SensComponent}, 
{path:'/groupes',  name: 'GroupesPolitiques',  component: GroupesPolitiquesComponent}, 
{path:'/senateur/:matricule',  name: 'VignetteSenateur', component: SenVignetteComponent} 
]) 
export class AppComponent { }

fonte

2016-02-04 Ludovic Pénet

Controllare http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser, in particolare il tag < '. –

ok, quindi tutto andava bene tranne il fatto che la base generata in modo dinamico href era sbagliata.

Grazie a @ günter-Zöchbauer per indicare Angular 2.0 router not working on reloading the browser

Nel mio codice originale, è generato da document.location:

<script>document.write('<base href="' + document.location + '" />');</script>

Se posso passare ad un elemento statico:

<base href="/angular2-sens/"/>

Funziona. Naturalmente, analizzerò piuttosto document.location in un'app "reale".

fonte

2016-02-04 10:32:00

Sono curioso di sapere come gli URL generati differiscono prima/dopo la modifica? –

Nella soluzione che indico qui, l'elemento base è statico e non viene più generato. O non ho capito la tua domanda? –

Quindi non si tratta del primo non ha prodotto il corretto 'href' ma che il tag' 'aggiunto dinamicamente non ha funzionato affatto? –

Routing angolare 2 e accesso diretto a una rotta specifica: come configurare Apache?

risposta

Problemi correlati