角2：404错误当我通过浏览器刷新时

Question

角2：404错误当我通过浏览器刷新时我刚接触到角2，我已经将我的单页应用程序存储在我的服务器中，在一个名为“myapp”的文件夹中。我已将基中的URL更改为http://example.com/myapp/`.我的项目有两页。所以我实现了角2路由。我将默认页面设置为登录。当我打字时http://example.com/myapp/在我的浏览器中，它将自动重定向到http://example.com/myapp/login..但是如果刷新页面，我会得到一个404错误，说http://example.com/myapp/login找不到。但是如果我使用Lite服务器运行我的项目，一切都正常。在本例中，index.html中的URL将是"/"..怎么解决呢？

Answer 1

事实上，刷新应用程序时出现404错误是正常的，因为浏览器中的实际地址正在更新(而且没有#/hashbang方法)。默认情况下，HTML 5历史记录用于Angular 2中的重用。

若要修复404错误，需要更新服务器以服务于index.html您定义的每个路由路径的文件。

如果要切换到HashBang方法，则需要使用以下配置：

import {bootstrap} from 'angular2/platform/browser';import {provide} from 'angular2/core';import {ROUTER_PROVIDERS} 
from 'angular2/router';import {LocationStrategy, HashLocationStrategy} from '@angular/common';import {MyApp} from 
'./myapp';bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  {provide: LocationStrategy, useClass: HashLocationStrategy}]);

在这种情况下，当您刷新页面时，它将再次显示(但您将有一个#在你的地址)。

这个链接也可以帮助您：当我刷新我的网站，我得到404。这是Angular 2和Firebase.

希望它能帮到你，蒂埃里

Answer 2

更新为角2终版本

在app.module.ts中：

• 增加进口：

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

• 在NgModule Provider中添加：

  {provide: LocationStrategy, useClass: HashLocationStrategy}

例(附件.module.ts)：

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

---

替代

使用RouterModule.forroot和{useHash：true}参数。

例子：(来自角文档)

import { NgModule } from '@angular/core';
...

const routes: Routes = [//routes in here];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }