我通过浏览器刷新时出现angular度2：404错误
我是Angular 2的新手。我将我的单页应用程序存储在名为“myapp”的文件夹中。 我已将基址中的url更改为http://example.com/myapp/ `。
我的项目有两页。 所以我实现了Angular 2的路由。 我将默认页面设置为login。 当我在浏览器中inputhttp://example.com/myapp/ ，它会自动redirect到http://example.com/myapp/login 。 但是，如果刷新该页面，我得到一个404错误，说http://example.com/myapp/login没有find。
但是如果我使用lite服务器运行我的项目，一切正常。 在这种情况下，将index.html中的URL设为"/" 。 如何解决它？
实际上，刷新应用程序时，由于浏览器中的实际地址正在更新（并且没有＃/ hashbang方式），因此出现404错误是正常的。 默认情况下，在Angular2中使用HTML5历史logging进行重用。
如果您不希望发生404错误，则需要更新服务器以为您定义的每个pathpath提供index.html文件。
如果你想切换到HashBang方法，你需要使用这个configuration：
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。这是与Angular2和firebase 。
希望它能帮助你，Thierry
更新Angular 2最终版本
在app.module.ts中：
-
添加导入：
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -
在NgMoudle提供程序中，添加：
{provide: LocationStrategy, useClass: HashLocationStrategy}
示例 （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 {}
替代
使用RouterModule.forRoot和{useHash：true}参数。
示例:(从angular度docs ）
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 { }
对于（像我一样）真正需要PathLocationStrategy （即html5Mode）而不是HashLocationStrategy ，请参阅如何：将服务器configuration为使用 Angular wiki中的html5Mode ：
如果启用了html5Mode，则
#字符将不再用于您的url。#符号很有用，因为它不需要服务器端configuration。 没有#，URL看起来好多了，但是它也需要服务器端重写。
在这里，我只复制维基的三个例子，以防维基丢失。 其他例子可以通过searchFirebase关键字“URL rewrite”（例如这个答案 ）find。
阿帕奇
<VirtualHost *:80> ServerName my-app DocumentRoot /path/to/app <Directory /path/to/app> RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow HTML5 state links RewriteRule ^ index.html [L] </Directory> </VirtualHost>
重写模块的文档
nginx的
server { server_name my-app; root /path/to/app; location / { try_files $uri $uri/ /index.html; } }
有关try_files文档
IIS
<system.webServer> <rewrite> <rules> <rule name="Main Rule" 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>
我有同样的问题。 我的Angular应用程序在Windows服务器上运行。
我通过在根目录中创build一个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>
也许你可以在使用RouterModule注册你的根的时候这样做。 您可以传递第二个对象，其属性为“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ürgenGutsch提供的此解决scheme很有帮助。 他在一篇博客文章中描述。 这对我来说是最好的解决scheme。 将下面提供的C＃代码放置在您的Startup.cs public void Configure（）之前，并放在app.UseStaticFiles（）之前。
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(); } });
对于那些使用Angular 2 rc4或更高版本的人来说，它似乎已经将LocationStrategy从路由器转移到了常用的。 你必须从那里导入它。
还要注意'提供'线周围的大括号。
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} ]);
