我开发了一个小型 Angular2 测试应用程序，除其他功能外，它还利用了路由。
只要用户首先访问主页，然后导航到子页面，它就可以正常工作。
如果用户试图直接访问一个子页面，如果我没有配置网络服务器，我会得到一个 404。这是完全正常的，因为没有与路由对应的“真实页面”。
我尝试在 apache 2.2 中添加以下配置来处理 HTML5 推送状态:
<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 { }
最佳答案
好的，所以一切都很好，除了动态生成的基本 href 是错误的。
感谢@günter-zöchbauer 的指点 Angular 2.0 router not working on reloading the browser
在我的原始代码中，它是从 document.location 生成的:
<script>document.write('<base href="' + document.location + '" />');</script>
如果我切换到静态元素:
<base href="/angular2-sens/"/>
它有效。当然，我更愿意在“真实”应用中进一步分析 document.location。
关于apache - Angular 2 路由和直接访问特定路由 : how to configure Apache?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35198319/