Angular 2.0路由器无法重新加载浏览器

Question

我使用的是角度2.0.0-阿尔法.30版本。当重定向到其他路由时，刷新浏览器，其显示无法获取/路由。

你能帮我弄清楚为什么会发生这个错误吗？

Answer 1

Angular默认使用HTML5 pushstate（PathLocationStrategy在Angular俚语中）。
您要么需要一个处理所有请求的服务器，就像它在请求index.html一样，要么切换到HashLocationStrategy（路由的URL中带有#）https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

另见https://ng milk . rocks/2015/03/09/angular js-html 5-mode-or-pretty-URLs-on-Apache-using-htaccess/

要切换到HashLocationStrategy，请使用

的更新

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp], 
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);

或更短的使用哈希

imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...

确保您拥有所有必需的导入

对于新的(RC.3)路由器

<base href="."> 

也会导致404。

它要求取而代之的是

<base href="/">

的更新

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
  // or since RC.2
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
]);

import {provide} from '@angular/core';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF}  
from '@angular/common';  

的更新

import {BrowserPlatformLocation} from '@angular/platform-browser';

import {provide} from 'angular2/core';
import {
  // PlatformLocation,
  // Location,
  LocationStrategy,
  HashLocationStrategy,
  // PathLocationStrategy,
  APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';

import {provide} from 'angular2/core';
import {
  HashLocationStrategy
  LocationStrategy,
  ROUTER_PROVIDERS,
} from 'angular2/router';

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26中断-变化

Answer 2

免责声明：此修复适用于Alpha44

我遇到了同样的问题，并通过实施Angular中列出的HashLocationStrategy解决了这个问题。io API预览。

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

首先导入必要的指令

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

最后，像这样引导它

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

您的路由将显示为http://localhost/#/route，当您刷新时，它将在适当的位置重新加载。

希望这有帮助！

Answer 3

您看到的错误是因为您正在请求http://localhost/route这是不存在的。据西蒙介绍。

使用 html5 路由时，需要将应用（当前为 404）中的所有路由映射到服务器端的索引.html。以下是为您提供的一些选项：

> < li>

使用实时服务器:https://www.npmjs.com/package/live-server

$live-server --entry-file=index.html`

使用nginx：http://nginx.org/en/docs/beginners_guide.html

error_page 404 /index.html

Tomcat-web.xml的配置。来自Kunin的评论

<error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
</error-page>