Angular 2 Routing und direkter Zugriff auf eine bestimmte Route: Wie konfiguriert man Apache?

Ich habe eine kleine Angular2-Test-App entwickelt, die unter anderem Routing nutzt.Angular 2 Routing und direkter Zugriff auf eine bestimmte Route: Wie konfiguriert man Apache?

Es funktioniert einwandfrei, solange der Benutzer zuerst auf die Homepage zugreift und dann zu Unterseiten navigiert.

Wenn der Benutzer versucht, direkt auf eine Unterseite zuzugreifen, habe ich einen 404, wenn ich den Webserver nicht konfiguriere. Dies ist völlig normal, da es keine "richtige Seite" gibt, die der Route entspricht.

Ich habe versucht, die folgende Konfiguration in Apache 2.2 in den Griff HTML5 Staat Push:

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

Es macht die Dinge besser als ich nicht mehr 404. Allerdings bin ich „nur“ zu Hause umgeleitet der App und Routing wird nicht durchgeführt.

Was soll ich tun, um dies zu korrigieren?

Meine index.html Seite lautet:

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

Meine app/boot.ts ist:

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

Und schließlich meine App-Komponente:

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

Meine Die App-Komponente, in der das Routing konfiguriert ist, lautet:

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 { }

Quelle

2016-02-04 Ludovic Pénet

Bitte überprüfen Sie http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser insbesondere das '-Tag. –

ok, also war alles in Ordnung, außer der Tatsache, dass die dynamisch generierte Base href falsch war.

Dank @ günter-Zöchbauer für Angular 2.0 router not working on reloading the browser

In meinem ursprünglichen Code zeigt, wird es aus document.location generiert:

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

Wenn ich auf ein statisches Element wechseln:

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

Es funktioniert. Natürlich werde ich document.location lieber in einer "echten" App analysieren.

Quelle

2016-02-04 10:32:00

Ich bin gespannt, wie sich die generierten URLs vor/nach der Änderung unterscheiden? –

In der Lösung gebe ich hier an, das Basiselement ist statisch und wird nicht mehr erzeugt. Oder ich habe deine Frage nicht verstanden? –

Es geht also nicht darum, dass das erste nicht das korrekte 'href' erzeugt hat, sondern dass das dynamisch hinzugefügte '' Tag überhaupt nicht funktioniert hat? –

Angular 2 Routing und direkter Zugriff auf eine bestimmte Route: Wie konfiguriert man Apache?

Antwort

Verwandte Themen