Angular 2 路由和直接访问特定路由:如何配置 Apache?

本文介绍了Angular 2 路由和直接访问特定路由:如何配置 Apache?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我开发了一个小型 Angular2 测试应用程序，它利用路由功能.

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.

如果用户尝试直接访问子页面，如果我不配置 Web 服务器，我会收到 404.这是完全正常的，因为没有与路线对应的真实页面".

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.

我尝试在 apache 2.2 中添加以下配置来处理 HTML5 推送状态:

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>

它使事情变得更好，因为我不再有 404.但是，我仅"重定向到应用程序的主页，并且不执行路由.

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 ?

我的 index.html 页面是:

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>

我的 app/boot.ts 是:

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

路由和直接访问特定路由

Angular 2 路由和直接访问特定路由:如何配置 Apache?

问题描述

推荐答案