Eckige 2-routing und direkten Zugang zu einer spezifischen route : konfigurieren von Apache?

Ich entwickelte eine kleine Angular2 test-app, die neben anderen features, nutzt routing.

Es funktioniert gut, solange der Benutzer greift auf die home-Seite, dann navigiert zu den untergeordneten Seiten.

Wenn der Benutzer versucht, direkt auf eine Unterseite, bekam ich eine 404, wenn ich nicht den Webserver konfigurieren. Das ist völlig normal, da es keine "echte Seite" entsprechend der route.

Ich versuchte, fügen Sie die folgende Konfiguration in apache 2.2 zu behandeln HTML5 Push Zustand:

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

Macht es die Sache besser, als ich nicht mehr einen 404. Allerdings bin ich "nur" die Weiterleitung auf die Startseite der app und das routing nicht durchgeführt.

Was soll ich tun, um dies zu korrigieren ?

Meine index.html Seite :

<html>

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

    <link  href="simplegrid.css" type="text/css">
    <link  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 :

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

Meine app-Komponente, wo das routing konfiguriert wird, ist :

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

Bitte überprüfen Sie stackoverflow.com/questions/31415052/... vor allem die <base href=""> tag.
Ihre Umleitung code hat mir sehr geholfen. Passt perfekt für mein server ich habe viele htaccess Dateien, aber keiner hat vorgeschlagen RewriteBase .Danke.

InformationsquelleAutor Ludovic Pénet | 2016-02-04

6

ok, also alles war in Ordnung, ausgenommen die Tatsache, dass die dynamisch generierten base href war falsch.

Dank @günter-zöchbauer für den Hinweis Angular 2.0 router funktioniert nicht auf Neuladen des Browsers

In meinem ursprünglichen code wird generiert aus dem Dokument.Ort :
```
<script>document.write('<base href="' + document.location + '" />');</script>
```
Wenn ich wechseln, um ein statisches element :
```
<base href="/angular2-sens/"/>
```
Es funktioniert. Natürlich werde ich eher eine nähere analyse Dokument.Lage in einer "echten" app.

Ich bin neugierig, wie die generierten URLs unterscheiden sich vor/nach der änderung?
In der Lösung, die ich zeigen hier, das base-element ist statisch und nicht mehr generiert. Oder ich habe Ihre Frage nicht verstanden ?
Es geht also nicht um die ehemaligen nicht produzieren die richtige href aber, dass die dynamisch Hinzugefügt <base> - tag hat überhaupt nicht funktioniert?
Wenn Sie wollen, um es dynamisch zu verwenden, auf diese Weise stackoverflow.com/a/34535256/217408
Ein weiterer wichtiger Punkt ist, dass der <base href="..."/> - element sollte das erste in den header, oder Ihr werdet Probleme haben, wenn Sie direkt auf URLs. Winkel 2 tuto wurde entsprechend aktualisiert.

InformationsquelleAutor Ludovic Pénet

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.