Category Archives: angular2-routing

Angular 2 routing not working on page refresh with Apache

Using Angular 2 RC 4 with the updated @angular/router, I got the route URLs to display in the browser using the answer in this question

However, when I refresh or directly request a page with a route other than the default, it takes me to the default page (as if I requested index.html) rather than the routed page I want. How can I make the Angular 2 routes work correctly on a page refresh with Apache 2.4?

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