web-dev-qa-db-ja.com

Angular 2ルーティングと特定のルートへの直接アクセス：Apacheの設定方法は？

他の機能の中でも特にルーティングを活用する小さなAngular2テストアプリを開発しました。

ユーザーが最初にホームページにアクセスし、次にサブページに移動する限り、正常に機能します。

ユーザーがサブページに直接アクセスしようとした場合、Webサーバーを構成しないと404が返されます。ルートに対応する「実際のページ」がないため、これは完全に正常です。

HTML5プッシュ状態を処理するために、Apache 2.2に次の構成を追加しようとしました。

<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がなくなったので、状況は良くなります。ただし、アプリのホームにリダイレクトされるだけで、ルーティングは実行されません。

これを修正するにはどうすればよいですか？

私のindex.htmlページは：

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

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

そして最後に、私のアプリコンポーネントは次のとおりです。

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

ルーティングが構成されている私のアプリコンポーネントは次のとおりです。

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 { }
apacheangularangular2-routing
16
Ludovic Pénet

わかりましたので、動的に生成されたベースhrefが間違っているという事実を除いて、すべてが問題ありませんでした。

指摘してくれた@günter-zöchbauerに感謝 Angular 2.0ルーターがブラウザのリロードで機能しない

私の元のコードでは、それはdocument.locationから生成されます：

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

静的要素に切り替えると：

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

できます。もちろん、実際のアプリでdocument.locationをさらに分析します。

6
Ludovic Pénet