Angular 2 routing and direct access to a specific route : how to configure Apache?

I developped a small Angular2 test app which, among other features, leverages routing.

It works fine as long as the user first accesses the home page, then navigates to sub pages.

If the user tries to directly access a subpage, I got a 404 if I do not configure the web server. This is perfectly normal as there is no "real page" corresponding to the route.

I tried to add the following configuration in apache 2.2 to handle HTML5 Push State:

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

It makes things better as I no longer have a 404. However, I am "only" redirected to the home of the app and routing is not performed.

What should I do to correct this ?

My index.html page is :

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

My app/boot.ts is :

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

And, finally, my app component is :

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

My app component, where the routing is configured, is :

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

Ludovic Pénet

ok, so everything was fine excepted the fact that the dynamically generated base href was wrong.

Thanks to @günter-zöchbauer for pointing Angular 2.0 router not working on reloading the browser

In my original code, it is generated from document.location :

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

If I switch to a static element :

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

It works. Of course, I will rather further analyse document.location in a "real" app.

来源：https://stackoverflow.com/questions/35198319/angular-2-routing-and-direct-access-to-a-specific-route-how-to-configure-apach

标签

apache

angular

angular2-routing