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

Question

我使用的是Angular 2.0.0-alpha.30版本.当重定向到不同的路由,然后刷新浏览器,它显示无法GET /路由.

你能帮我弄清楚这个错误发生的原因吗？

Answer 1

您看到的错误是因为您要求http:// localhost/route不存在.据西蒙说.

使用html5路由时,您需要将应用程序中的所有路由(当前为404)映射到服务器端的index.html.以下是一些选项:

1. 使用live-server:https://www.npmjs.com/package/live-server

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

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

   error_page 404 /index.html

3. Tomcat - web.xml的配置.从库宁的评论

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

Answer 2

免责声明:此修复程序适用于Alpha44

我有同样的问题,并通过实施解决它HashLocationStrategy在Angular.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

默认情况下PathLocationStrategy,Angular 使用HTML5 pushstate(在Angular slang中).
您需要一台服务器来处理请求index.html或切换到的所有请求HashLocationStrategy(在路由的URL中使用#)https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class. HTML

另见https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

要切换HashLocationStrategy使用

更新> = RC.5和2.0.0 final

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

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

或更短 useHash

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

确保您拥有所有必需的进口

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

<base href="."> 

也可能导致404.

它需要相反

<base href="/">

更新> = RC.x.

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';  

更新> = beta.16导入已更改

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';

<beta.16

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 4

我认为您看到的错误是因为您正在请求不存在的http:// localhost/route.您需要确保您的服务器将所有请求映射到您的主index.html页面.

由于Angular 2默认使用html5路由而不是在url末尾使用散列,因此刷新页面看起来像是对不同资源的请求.

Answer 5

如果您使用默认的HTML位置策略,这是所有路由器版本中的常见情况.

会发生什么是浏览器栏上的URL是一个普通的完整HTML网址,例如:http://localhost/route.

因此,当我们在浏览器栏中按Enter键时,会向服务器发送一个实际的HTTP请求以获取名为的文件route.

服务器没有这样的文件,并且服务器上没有配置像express这样的东西来处理请求并提供响应,因此服务器返回404 Not Found,因为它找不到该route文件.

我们希望服务器返回index.html包含单页面应用程序的文件.然后路由器应该启动并处理/routeURL并显示映射到它的组件.

因此,要解决此问题,我们需要将服务器配置为返回index.html(假设这是您的单页应用程序文件的名称),以防请求无法处理,而不是404 Not Found.

这样做的方式取决于所使用的服务器端技术.例如,如果它的Java可能需要编写一个servlet,那么在Rails中它将是不同的,等等.

举一个具体的例子,例如,如果您使用的是NodeJs,则必须编写如下的中间件:

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: '.' });
}

然后在中间件链的最后注册它:

app.use(sendSpaFileIfUnmatched);

这将index.html代替返回404,路由器将启动,一切都将按预期工作.

Answer 6

确保将其放在index.html的head元素中:

<base href="/">

Angular2 路由和导航文档中的示例使用头部中的以下代码(它们解释了为什么在文档的实例示例中):

<script>document.write('<base href="' + document.location + '" />');</script>

刷新页面时,这将动态地将基本href设置为当前document.location.我可以看到这导致一些混淆,人们浏览文档并尝试复制plunker.

Answer 7

如果您希望能够在浏览器中输入URL而不将AppServer配置为处理对index.html的所有请求,则必须使用HashLocationStrategy.

最简单的配置方法是使用:

RouterModule.forRoot(routes, { useHash: true })

代替:

RouterModule.forRoot(routes)

使用HashLocationStrategy你的网址将是:

http://server:port/#/path

Answer 8

我在使用webpack-dev-server时遇到了同样的问题.我不得不将devServer选项添加到我的webpack中.

解:

// in webpack
devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}

Answer 9

如果您使用Apache或Nginx作为服务器,则必须创建.htaccess(如果之前未创建)和"On"RewriteEngine

    RewriteEngine On  
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
      RewriteRule ^ /index.html

Answer 10

我的服务器是Apache,我在刷新或深度链接时做的修复404非常简单.只需在apache vhost config中添加一行:

ErrorDocument 404 /index.html

因此任何404错误都将被重定向到index.html,这就是angular2路由所需要的.

整个vhost文件示例:

<VirtualHost *:80>

  ServerName fenz.niwa.local

  DirectoryIndex index.html

  ErrorDocument 404 /index.html

  DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"

  ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log

  CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined




  <Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">

    AllowOverride All

    Options Indexes FollowSymLinks

    #Order allow,deny

    #Allow from All

    Require all granted

  </Directory>




  Header set Access-Control-Allow-Origin "*"

  Header set Access-Control-Allow-Methods "GET, POST"

  Header set Access-Control-Allow-Credentials "true"

  Header set Access-Control-Allow-Headers "Accept-Encoding"

</VirtualHost>

无论您使用什么服务器,我认为重点是找到配置服务器以将404重定向到index.html的方法.