角2路由，并可直接进入特定路由：如何配置Apache？ [英] Angular 2 routing and direct access to a specific route : how to configure Apache?
问题描述
我developped小Angular2测试应用程序当中，除其他功能，充分利用了路由。
据只要用户第一次访问主页正常工作，然后导航到子页面。
如果用户试图直接访问子页面，我得到了404，如果我不配置Web服务器。这是完全正常的，因为没有真实页所对应的路由。
我尝试添加在Apache 2.2的下面的配置，以处理HTML5推州：
＆LT;目录/ var / www / html等/ angular2-SENS＆GT;
选择了FollowSymLinks索引
RewriteEngine叙述在
的RewriteBase / angular2-SENS
重写规则^指数\\ html的$ - [L]
的RewriteCond％{} REQUEST_FILENAME！-f
的RewriteCond％{} REQUEST_FILENAME！-d
重写规则。 /angular2-sens/index.html [L]
＆LT; /目录＆GT;
这使事情变得更好，因为我不再有一个404不过，我只是重定向到应用程序的主，不进行路由。
我应该怎么做来纠正呢？
我的index.html页面是：
＆LT; HTML和GT;＆LT; HEAD＆GT;
＆LT;标题＆GT; 2角及快速入门LT; /标题＆GT; ＆LT;链接rel =stylesheet属性HREF =simplegrid.css类型=文/ CSS＆GT;
＆LT;链接rel =stylesheet属性HREF =sen.css类型=文/ CSS＆GT; ＆LT;脚本SRC =node_modules / angular2 /包/ angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / systemjs /距离/ system.src.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / rxjs /包/ Rx.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ angular2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ http.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ router.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - dev的
＆LT;脚本SRC =node_modules / angular2 /包/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ http.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ router.dev.js＆GT;＆LT; / SCRIPT＆GT;
- ＆GT; ＆LT;！ - 2.配置SystemJS - ＆GT;
＆LT;脚本＆GT;
System.config（{
图：{
rxjs：node_modules / rxjs'//或你已经安装了它
}，
包：{
应用：{
格式为：注册，
defaultExtension：'JS'
}，
rxjs：{
defaultExtension：'JS'
}
}
}）;
System.import（应用程序/启动）
。然后（NULL，console.error.bind（控制台））;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;！ - 3显示应用程序 - ＆GT;
＆LT;身体GT;
＆LT;应用＆GT; Chargement ...＆LT; /应用＆GT;
＆LT; /身体GT;
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
我的应用程序/ boot.ts是：
从'angular2 /平台/浏览器的进口{}引导;
从angular2 / HTTP'进口{HTTP_PROVIDERS};
进口{} AppComponent从'./app.component';
从angular2 /路由器的进口{ROUTER_PROVIDERS};进口{} enableProdMode从'angular2 /核心; enableProdMode（）;自举（AppComponent，[HTTP_PROVIDERS，ROUTER_PROVIDERS]）;
最后，我的应用程序组件是：
从'angular2 /平台/浏览器的进口{}引导;
从angular2 / HTTP'进口{HTTP_PROVIDERS};
进口{} AppComponent从'./app.component';
从angular2 /路由器的进口{ROUTER_PROVIDERS};进口{} enableProdMode从'angular2 /核心; enableProdMode（）;自举（AppComponent，[HTTP_PROVIDERS，ROUTER_PROVIDERS]）;
我的应用程序组件，其路由配置是：
进口{}组件从angular2 /核心;
进口{RouteConfig，ROUTER_DIRECTIVES}从'angular2 /路由器;
进口{} SensComponent从'./sens.component';
进口{} GroupesPolitiquesComponent从'./groupes-politiques.component';
进口{} SenVignetteComponent从'./sen-vignette.component';@零件（{
选择：应用程序，
模板：`
＆LT; H1＆GT;应用角度2相辅助Sénateurs（AA2RSen）LT; / H1＆GT;
＆LT;＆导航GT;
＆LT; A [routerLink] =['Senateurs']＆GT; Tous的莱斯Sénateurs恩赛道日mandat＆LT; / A＆GT;
＆下;一个[routerLink] =['GroupesPolitiques']＆GT; Groupes政治学院＆下; / A＆GT;
＆LT; / NAV＆GT;
＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
`
指令：[ROUTER_DIRECTIVES]
}）
@RouteConfig（[
{路径：'/ senateurs'，名称：'Senateurs'，成分：SensComponent}，
{路径：'/ groupes'，名称：'GroupesPolitiques'，成分：GroupesPolitiquesComponent}，
{路径：'/ senateur /：matricule'，名称：'VignetteSenateur'，成分：SenVignetteComponent}
]）
出口类AppComponent {}
好了，一切都很好除外的事实，动态生成的基本href是错误的。
感谢@君特 - zöchbauer的指点<一个href=\"http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser\">Angular 2.0路由器不工作的重装浏览器
在我原来的code，它是从document.location生成的：
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
如果我切换到一个静态的元素：
＆LT;基本href =/ angular2-SENS //＆GT;
它的工作原理。当然，我更喜欢进一步分析了真正的应用程序document.location。
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 { }
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.
这篇关于角2路由，并可直接进入特定路由：如何配置Apache？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
