我开发了一个小型的Angular2testing应用程序，除了其他function，利用路由。
只要用户首先访问主页，然后导航到子页面，它就可以正常工作。
如果用户试图直接访问一个子页面，如果我没有configurationWeb服务器，我得到一个404。 这是完全正常的，因为没有与该路线相对应的“实际页面”。
我试图在apache 2.2中添加以下configuration来处理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。但是，我“只”被redirect到应用程序的家，路由不执行。
我该怎么做才能纠正这个问题？
我的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]);
我的应用程序组件，其中路由configuration，是：
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路由器不能重新加载浏览器
在我原来的代码，它是从document.location生成的：
<script>document.write('<base href="' + document.location + '" />');</script>
如果我切换到一个静态元素：
<base href="/angular2-sens/"/>
有用。 当然，我宁愿在一个“真实”的应用程序中进一步分析document.location。