Angular 当我通过浏览器刷新时,出现角度2:404错误
我是新来的。我已将我的单页应用程序存储在服务器中名为“myapp”的文件夹中。我已将库中的URL更改为 我的项目有两页。所以我实现了Angular 2路由。我将默认页面设置为登录。当我键入Angular 当我通过浏览器刷新时,出现角度2:404错误,angular,angular2-routing,Angular,Angular2 Routing,我是新来的。我已将我的单页应用程序存储在服务器中名为“myapp”的文件夹中。我已将库中的URL更改为 我的项目有两页。所以我实现了Angular 2路由。我将默认页面设置为登录。当我键入http://example.com/myapp/在我的浏览器中,它将自动重定向到http://example.com/myapp/login。但是如果刷新该页面,我会得到一个404错误,说http://example.com/myapp/login未找到 但是如果我使用lite服务器运行我的项目,一切都正常。
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}
可供替代的 将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>