Angular 当我通过浏览器刷新时，出现角度2:404错误

我是新来的。我已将我的单页应用程序存储在服务器中名为“myapp”的文件夹中。我已将库中的URL更改为

我的项目有两页。所以我实现了Angular 2路由。我将默认页面设置为登录。当我键入

http://example.com/myapp/

在我的浏览器中，它将自动重定向到

http://example.com/myapp/login

。但是如果刷新该页面，我会得到一个

404

错误，说

http://example.com/myapp/login

未找到

---

但是如果我使用lite服务器运行我的项目，一切都正常。在这种情况下，index.html中的基本URL将是

“/”

。如何修复它？

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

要修复404错误，您需要更新服务器，为您定义的每个路由路径提供

index.html

文件

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

从'angular2/platform/browser'导入{bootstrap}；
从'angular2/core'导入{provide}；
从“angular2/ROUTER”导入{ROUTER_PROVIDERS}；
从“@angular/common”导入{LocationStrategy，HashLocationStrategy}；
从“/MyApp”导入{MyApp}；
引导程序（MyApp[
路由器供应商，
{提供：LocationStrategy，useClass:HashLocationStrategy}
]);

在这种情况下，当您刷新页面时，它将再次显示（但您的地址中将有一个

#

）

此链接也可以帮助您：

希望它能帮助你，

---

Thierry

对于使用Angular 2 rc4或更高版本阅读本文的人来说，定位策略似乎已经从路由器转移到了普通路由器。你必须从那里导入它

还要注意“提供”行周围的花括号

main.ts

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

角度2最终版更新 在app.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 {}

• 添加导入：

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

• 在NgModule provider中，添加：

    {provide: LocationStrategy, useClass: HashLocationStrategy}
  

示例（app.module.ts）：

---

可供替代的 将RouterModule.forRoot与{useHash:true}参数一起使用

示例：（来自）

---

也许您可以在使用

RouterModule

注册

root

时执行此操作。您可以通过属性

useHash:true

传递第二个对象，如下所示：

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { ROUTES }   from './app.routes';

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

---

如果您在Visual Studio 2015中通过ASP.NET Core 1运行Angular 2，您可能会发现Jürgen Gutsch提供的此解决方案非常有用。他用英语描述它。这对我来说是最好的解决办法。将下面提供的C#代码放在Startup.cs public void Configure（）中app.UseStaticFiles（）的前面

对于真正想要

PathLocationStrategy

（即HTML5模式）而不是

HashLocationStrategy

的人（如我），请参见第三方wiki：

启用HTML5模式后，URL中将不再使用

#

字符。

#

符号很有用，因为它不需要服务器端配置。如果没有

#

，URL看起来会更好，但也需要服务器端重写

这里我只从wiki复制了三个示例，以防wiki丢失。其他示例可通过搜索关键字“URL重写”（例如Firebase）找到

阿帕奇

ServerName我的应用程序
DocumentRoot/path/to/app
重新启动发动机
#不要重写文件或目录
RewriteCond%{REQUEST_FILENAME}-f[或]
RewriteCond%{REQUEST_FILENAME}-d
重写规则^-[L]
#将所有其他内容重写为index.html，以允许HTML5状态链接
重写规则^index.html[L]

nginx

非法移民

---

我也有同样的问题。我的Angular应用程序正在Windows服务器上运行

我通过在根目录中创建web.config文件解决了这个问题

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这解决了我的问题，非常感谢。然而，使用HashBang方法有任何缺点吗？我的意思是在SEO或其他方面？如果我们不想使用HashLocationStrategy，而是PathLocationStrategy呢？@Ben，正如Thierry提到的，“如果您不想出现404错误，您需要更新服务器，为您定义的每个路由路径提供index.html文件。”每个服务器软件的详细方式在中，或参考Thierry提供的Firebase配置链接。下面的答案是angular2最终版本的更新Franklin Yu的答案实际上应该是可接受的答案。Thierry Templier的回答只是说放回#以解决问题，这不是答案，或者使用随附的链接假设海报使用的是firebase，而海报可能不是。Franklin提供的wiki回答了这些问题，并附带说明：对于Apache，您可以在.htaccess文件中添加相同的配置。答案可能会根据受欢迎程度重新排列，因此不会保留相对位置。请在你的答案中提供另一个答案的链接。这对我来说确实有用。非常感谢。但是有没有办法失去#？是的，这对我也很有用。但是我使用auth0进行身份验证，我必须提供允许的URL。当我现在刷新添加了散列的页面时，登录时它不会接受url。有什么建议可以在刷新页面时修复此问题或删除哈希标记？添加提供程序此答案的第一个解决方案（提供程序：[{Provider:LocationStrategy，useClass:HashLocationStrategy}]，引导程序：[AppComponent]，）确实有效！！非常感谢！处理Angular 4.2.6:）这是简单的

app.Use( async ( context, next ) => {
    await next();

    if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) {
        context.Request.Path = "/index.html";
        await next();
    }
});

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>