Angular 2 路由和直接访问特定路由:如何配置 Apache? [英] Angular 2 routing and direct access to a specific route : how to configure 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 { }
推荐答案
ok，所以一切都很好，除了动态生成的 base href 错误.
ok, so everything was fine excepted the fact that the dynamically generated base href was wrong.
感谢@günter-zöchbauer 指出 Angular2.0 路由器无法重新加载浏览器
Thanks to @günter-zöchbauer for pointing Angular 2.0 router not working on reloading the browser
在我的原始代码中，它是从 document.location 生成的:
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/"/>
它有效.当然，我更愿意在真实"应用中进一步分析 document.location.
It works. Of course, I will rather further analyse document.location in a "real" app.
这篇关于Angular 2 路由和直接访问特定路由:如何配置 Apache?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
