blocks|key|4485618|text|我认为你看到的错误是因为你所请求的http://localhost/route并不存在。您需要确保您的服务器将所有请求映射到您的主index.html页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4485619|由于Angular+2默认使用html5路由，而不是在url末尾使用散列，因此刷新页面看起来像是对不同资源的请求。|4485620|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost/route^0|H|M|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I think the error you are seeing is because your are requesting <a href="http://localhost/route">http://localhost/route</a> which doesn't exist. You need to make sure that your server will map all requests to your main index.html page. 

As Angular 2 uses html5 routing by default rather than using hashes at the end of the url, refreshing the page looks like a request for a different resource.

blocks|key|4485649|text|西蒙的答案对我来说是正确的。我添加了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485650|app.get('*',+function(req,+res,+next)+{
++res.sendfile("dist/index.html");
});|code-block|syntax|javascript|4485651|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simon's answer was correct for me. I added this code:

<pre><code>app.get('*', function(req, res, next) {
 res.sendfile("dist/index.html");
});
</code></pre>

blocks|key|4484654|text|确保将其放在index.html的head元素中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4484655|<base+href="/">|code-block|syntax|javascript|4484656|Angular2+Routing+&+Navigation文档中的Example在头部使用以下代码(它们在文档的实时示例注释中解释了原因)：|offset|length|4484657|<script>document.write('<base+href="'+%2B+document.location+%2B+'"+/>');</script>|4484658|当您刷新页面时，这将动态地将基本href设置为您当前的document.location。我可以看到这给浏览文档并试图复制柱塞的人造成了一些困惑。|4484659|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles|1|https://angular.io/resources/live-examples/router/ts/plnkr.html^0|0|0|9|K|0|X|7|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@$I|11|J|12|1|13]|$I|14|J|15|1|16]]|A|$]]|$1|K|3|L|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

Make sure this is placed in the head element of your index.html:

<pre><code>&lt;base href="/"&gt;
</code></pre>

The <a href="https://angular.io/resources/live-examples/router/ts/plnkr.html">Example</a> in the Angular2 <a href="https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles">Routing &amp; Navigation</a> documentation uses the following code in the head instead (they explain why in the live example note of the documentation):

<pre><code>&lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
</code></pre>

When you refresh a page this will dynamically set the base href to your current document.location. I could see this causing some confusion for people skimming the documentation and trying to replicate the plunker.

blocks|key|4484684|text|服务器配置不是SPA的解决方案，我甚至也这么认为。如果出现错误的路径，您不想再次重新加载angular+SPA，对吗？因此，我不会依赖服务器路由并重定向到其他路由，但我会让index.html处理所有对angular应用程序路径的angular路由的请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4484685|尝试这样做，而不是其他方式或错误的路线。它对我来说是有效的，不确定，但似乎还在进行中。在面对问题时，我自己也遇到了这个问题。|4484686|@RouteConfig([
++{+path:+'/**',+redirectTo:+['MycmpnameCmp']+},+
+++...
++}
])|code-block|syntax|javascript|4484687|https://github.com/angular/angular/issues/4055|offset|length|4484688|但是，请记住配置您的服务器文件夹和访问权限，以防您的HTML或web脚本不是SPA。否则你将面临问题。对于我来说，当面临像您这样的问题时，它是服务器配置和上面的混合。|4484689|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$K|Z|L|10|1|11]]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]]]

Server configuration is not a solution for an SPA is what even I think. You dont want to reload an angular SPA again if a wrong route comes in, do you? So I will not depend on a server route and redirect to other route but yes I will let index.html handle all the requests for angular routes of the angular app path.

Try this instead of otherwise or wrong routes. It works for me, not sure but seems like work in progress. Stumbled this myself when facing an issue.

<pre><code>@RouteConfig([
 { path: '/**', redirectTo: ['MycmpnameCmp'] }, 
 ...
 }
])
</code></pre>

<a href="https://github.com/angular/angular/issues/4055" rel="nofollow">https://github.com/angular/angular/issues/4055</a>

However remember to configure your server folders and access right in case you have HTML or web scripts which are not SPA. Else you will face issues. For me when facing issue like you it was a mix of server configuration and above.

blocks|key|4484729|text|如果您使用的是默认HTML定位策略，则这是所有路由器版本中的常见情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4484730|实际情况是浏览器栏上的url是一个普通的完整HTML，例如：http://localhost/route。|offset|length|style|CODE|4484731|因此，当我们在浏览器栏中点击Enter时，会有一个实际的HTTP请求被发送到服务器，以获取一个名为route的文件。|4484732|服务器没有这样的文件，而且服务器上也没有配置像express这样的东西来处理请求和提供响应，因此服务器返回404NOT+Found，因为它找不到route文件。|4484733|我们希望服务器返回包含单页面应用程序的index.html文件。那么路由器应该启动并处理/route+url，并显示映射到它的组件。|4484734|因此，为了解决这个问题，我们需要将服务器配置为在无法处理请求的情况下返回index.html+(假设这是您的单页面应用程序文件的名称)，而不是返回404Not+Found。|4484735|实现这一点的方法将取决于所使用的服务器端技术。例如，如果是Java，你可能需要编写一个servlet，在Rails中则会有所不同，等等。|4484736|举个具体的例子，例如，如果你使用NodeJs，你必须像这样编写一个中间件：|4484737|function+sendSpaFileIfUnmatched(req,res)+{
++++res.sendFile("index.html",+{+root:+'.'+});
}|code-block|syntax|javascript|4484738|然后在中间件链的最末端注册它：|4484739|app.use(sendSpaFileIfUnmatched);|4484740|这将为index.html服务，而不是返回404，路由器将启动，一切都将按预期工作。|4484741|entityMap^0|0|U|M|0|1D|5|0|20|5|0|J|A|18|6|0|10|A|0|0|0|0|0|0|3|A|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1G|8|@$D|1H|E|1I|F|G]|$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1P|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1Q|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|11|5|V|7|1S|8|@]|9|@]|A|$W|X]]|$1|12|3|13|5|6|7|1T|8|@$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|15|$]]

This is a common situation in all router versions if you are using the default HTML location strategy.

What happens is that the URL on the browser bar is a normal full HTML url, like for example: <code>http://localhost/route</code>. 

So when we hit Enter in the browser bar, there is an actual HTTP request sent to the server to get a file named <code>route</code>.

The server does not have such file, and neither something like express is configured on the server to handle the request and provide a response, so the server return 404 Not Found, because it could not find the <code>route</code> file.

What we would like is for the server to return the <code>index.html</code> file containing the single page application. Then the router should kick in and process the <code>/route</code> url and display the component mapped to it.

So to fix the issue we need to configure the server to return <code>index.html</code> (assuming that is the name of your single page application file) in case the request could not be handled, as opposed to a 404 Not Found.

The way to do this will depend on the server side technology being used. If its Java for example you might have to write a servlet, in Rails it will be different, etc. 

To give a concrete example, if for example you are using NodeJs, you would have to write a middleware like this:

<pre><code>function sendSpaFileIfUnmatched(req,res) {
 res.sendFile("index.html", { root: '.' });
}
</code></pre>

And then register it at the very end of the middleware chain:

<pre><code>app.use(sendSpaFileIfUnmatched);
</code></pre>

This will serve <code>index.html</code> instead of returning a 404, the router will kick in and everything will work as expected.

blocks|key|4484791|text|对于那些在IIS中苦苦挣扎的人来说:根据官方的Angular+2文档(有人在这个帖子中发布了http://blog.angular-university.io/angular2-router/)，使用下面的PowerShell代码来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4484792|Import-WebAdministration
#+Grab+the+404+handler+and+update+it+to+redirect+to+index.html.
$redirect+=+Get-WebConfiguration+-filter+"/system.WebServer/httperrors/error[@statusCode='404']"+-PSPath+IIS:\Sites\LIS+
$redirect.path+=+"/index.html"
$redirect.responseMode+=+1
#+shove+the+updated+config+back+into+IIS
Set-WebConfiguration+-filter+"/system.WebServer/httperrors/error[@statusCode='404']"+-PSPath+IIS:\Sites\LIS+-value+$redirect|code-block|syntax|javascript|4484793|这将按照Angular+2文档(上面的链接)中的建议将404重定向到/index.html文件。|4484794|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.angular-university.io/angular2-router/^0|1A|1E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

For those of us struggling through life in IIS: use the following PowerShell code to fix this issue based on the official Angular 2 docs (that someone posted in this thread? <a href="http://blog.angular-university.io/angular2-router/" rel="nofollow">http://blog.angular-university.io/angular2-router/</a>) 

<pre><code>Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS 
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect
</code></pre>

This redirects the 404 to the /index.html file as per the suggestion in the Angular 2 docs (link above).

blocks|key|4485813|text|我使用webpack-dev-server时也遇到了同样的问题。我不得不将devServer选项添加到我的webpack中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485814|解决方案：|4485815|//+in+webpack
devServer:+{
++++historyApiFallback:+true,
++++stats:+'minimal'
}|code-block|syntax|javascript|4485816|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had the same problem with using webpack-dev-server. I had to add the devServer option to my webpack.

<h1>Solution:</h1>

<pre><code>// in webpack
devServer: {
 historyApiFallback: true,
 stats: 'minimal'
}
</code></pre>

blocks|key|4485874|text|我希望在HTML5模式下保留子页面的URL路径，而不是重定向回索引，而且没有任何解决方案告诉我如何做到这一点，所以我是这样实现的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485875|在IIS中为所有路由创建简单的虚拟目录，并将它们指向应用程序根目录。|4485876|使用此位置标记将system.webServer包装在Web.config.xml中，否则在第二次使用虚拟目录加载Web.config时会出现重复的错误：|4485877|<configuration>
++++<location+path="."+inheritInChildApplications="false">
++++<system.webServer>
++++++++<defaultDocument+enabled="true">
++++++++++++<files>
++++++++++++++++<add+value="index.html"+/>
++++++++++++</files>
++++++++</defaultDocument>
++++</system.webServer>
++</location>
</configuration>|code-block|syntax|javascript|4485878|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I wanted to preserve the URL path of sub pages in HTML5 mode without a redirect back to index and none of the solutions out there told me how to do this, so this is how I accomplished it:

Create simple virtual directories in IIS for all your routes and point them to the app root.

Wrap your system.webServer in your Web.config.xml with this location tag, otherwise you will get duplicate errors from it loading Web.config a second time with the virtual directory:

<pre><code>&lt;configuration&gt;
 &lt;location path="." inheritInChildApplications="false"&gt;
 &lt;system.webServer&gt;
 &lt;defaultDocument enabled="true"&gt;
 &lt;files&gt;
 &lt;add value="index.html" /&gt;
 &lt;/files&gt;
 &lt;/defaultDocument&gt;
 &lt;/system.webServer&gt;
 &lt;/location&gt;
&lt;/configuration&gt;
</code></pre>

blocks|key|4485915|text|我检查了angular+2+seed是如何工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485916|您可以使用express-history-api-fallback在页面重新加载时自动重定向。|offset|length|4485917|我认为这是解决这个问题的最优雅的方式。|4485918|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/express-history-api-fallback^0|0|5|S|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I checked in angular 2 seed how it works.

You can use <a href="https://www.npmjs.com/package/express-history-api-fallback" rel="nofollow noreferrer">express-history-api-fallback</a> to redirect automatically when a page is reload.

I think it's the most elegant way to resolve this problem IMO.

blocks|key|4485955|text|这不是正确的答案，但在刷新时，你可以通过牺牲404页面将所有无效调用重定向到主页。这是一个临时的技巧，只需在404.html文件上重放即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485956|<!doctype+html>
<html>
++++<head>
++++++++<script+type="text/javascript">
++++++++++++window.location.href+=+"http://"+%2B+document.location.host;
++++++++</script>
++++</head>
</html>|code-block|syntax|javascript|4485957|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is not the right answer but On-refresh you can redirect all dead calls to Homepage by sacrificing 404 page it's a temporary hack just replay following on 404.html file

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 window.location.href = "http://" + document.location.host;
 &lt;/script&gt;
 &lt;/head&gt;
&lt;/html&gt;
</code></pre>

blocks|key|4485987|text|如果你使用Apache或Nginx作为服务器，你必须创建一个.htaccess+(如果以前没有创建过)和"On“RewriteEngine|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4485988|RewriteEngine+On++
RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-f+[OR]
RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-d
RewriteRule+%5E+-+[L]
RewriteRule+%5E+/index.html|code-block|syntax|javascript|4485989|entityMap^0|U|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you are using Apache or Nginx as a server you have to create a <code>.htaccess</code> (if not created before) and &quot;On&quot; RewriteEngine
<pre><code>RewriteEngine On 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
</code></pre>

blocks|key|4485994|text|解决“路由器在重新加载浏览器时不工作”的最佳解决方案是我们应该使用spa-+back。如果您正在使用asp.net核心的angular2应用程序，那么我们需要在"StartUp.cs“页面上定义它。在MVC路由下。我正在附上代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485995|+app.UseMvc(routes+=>
++++++++{
++++++++++++routes.MapRoute(
++++++++++++++++name:+"default",
++++++++++++++++template:+"{controller=Home}/{action=Index}/{id?}");
++++++++++++routes.MapSpaFallbackRoute("spa-fallback",+new+{+controller+=+"Home",+action+=+"Index"+});
++++++++});|code-block|syntax|javascript|4485996|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The best solution of resolve the "router-not-working-on-reloading-the-browser" is that we should use spa-fall back. If you are using angular2 application with asp.net core then we need to defined it on "StartUp.cs" page. under MVC routs. I am attaching the code.

<pre><code> app.UseMvc(routes =&gt;
 {
 routes.MapRoute(
 name: "default",
 template: "{controller=Home}/{action=Index}/{id?}");
 routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
 });
</code></pre>

blocks|key|4485063|text|你可以在下面尝试一下。这对我很有效！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485064|main.component.ts|4485065|import+{+Component,+OnInit+}+from+'@angular/core';
import+{+Router+}+from+'@angular/router';

...
export+class+MainComponent+implements+OnInit+{
++++constructor(private+router:+Router)+{
++++++++let+path:+string+=+window.location.hash;
++++++++if+(path+&&+path.length+>+0)+{
++++++++++++this.router.navigate([path.substr(2)]);
++++++++}
++++}

++++public+ngOnInit()+{+}
}|code-block|syntax|javascript|4485066|您可以进一步增强path.substr(2)以拆分成路由器参数。我使用的是angular+2.4.9|4485067|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can try out below. It works for me!

main.component.ts

<pre><code>import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

...
export class MainComponent implements OnInit {
 constructor(private router: Router) {
 let path: string = window.location.hash;
 if (path &amp;&amp; path.length &gt; 0) {
 this.router.navigate([path.substr(2)]);
 }
 }

 public ngOnInit() { }
}
</code></pre>

You can further enhance path.substr(2) to split into router parameters. I'm using angular 2.4.9

blocks|key|4485085|text|你可以将这个解决方案用于mean应用程序，我使用ejs作为视图引擎：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485086|//+view+engine+setup
app.set('views',+path.join(__dirname,+'views'));
app.set('view+engine',+'ejs');
app.engine('html',+require('ejs').renderFile);
app.use(function+(req,+res,+next)+{
++++return+res.render('index.html');
});|code-block|syntax|javascript|4485087|也可以在angular-cli.json中设置|4485088|"apps":+[
++++{
++++++"root":+"src",
++++++"outDir":+"views",|4485089|它将工作得很好，而不是|4485090|app.get('*',+function+(req,+res,+next)+{
++++res.sendFile('dist/index.html',+{+root:+__dirname+});
+});|4485091|它在get+db调用和返回index.html时会产生问题|4485092|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can use this solution for mean application, I used ejs as view engine: 

<pre><code>// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(function (req, res, next) {
 return res.render('index.html');
});
</code></pre>

and also set in angular-cli.json

<pre><code>"apps": [
 {
 "root": "src",
 "outDir": "views",
</code></pre>

it will work fine instead of 

<pre><code>app.get('*', function (req, res, next) {
 res.sendFile('dist/index.html', { root: __dirname });
 });
</code></pre>

its creating issue with get db calls and returning index.html

blocks|key|4486142|text|2017-7-11:由于这是一个有这个问题的问题的linked，但是使用Angular+2和Electron，我将在这里添加我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4486143|我所要做的就是从我的index.html中删除<base+href="./">，然后Electron再次成功地重新加载页面。|style|CODE|4486144|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/36945864/electron-app-with-angular-2-reload-issue^0|P|6|0|0|N|G|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

2017-July-11: Since this is <a href="https://stackoverflow.com/questions/36945864/electron-app-with-angular-2-reload-issue">linked</a> from a question having this problem but using Angular 2 with Electron, I'll add my solution here.

All I had to do was remove <code>&lt;base href="./"&gt;</code> from my index.html and Electron started reloading the page again successfully.

blocks|key|4485210|text|我修复了这个问题(使用Java+/+Spring后端)，添加了一个匹配我的Angular路由中定义的所有内容的处理程序，它发送回index.html而不是404。这将有效地(重新)引导应用程序并加载正确的页面。我也有一个404处理程序，可以处理任何没有被这个函数捕获的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485211|@Controller+++++++++////don't+use+RestController+or+it+will+just+send+back+the+string+"index.html"
public+class+Redirect+{

++++private+static+final+Logger+logger+=+LoggerFactory.getLogger(Redirect.class);

++++@RequestMapping(value+=+{"comma",+"sep",+"list",+"of",+"routes"})
++++public+String+redirectToIndex(HttpServletRequest+request)+{
++++++++logger.warn("Redirect+api+called+for+URL+{}.+Sending+index.html+back+instead.+This+will+happen+on+a+page+refresh+or+reload+when+the+page+is+on+an+Angular+route",+request.getRequestURL());
++++++++return+"/index.html";
++++}
}|code-block|syntax|javascript|4485212|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I fixed this (using Java / Spring backend) by adding a handler that matches everything defined in my Angular routes, that sends back index.html instead of a 404. This then effectively (re)bootstraps the application and loads the correct page. I also have a 404 handler for anything that isn't caught by this.

<pre><code>@Controller ////don't use RestController or it will just send back the string "index.html"
public class Redirect {

 private static final Logger logger = LoggerFactory.getLogger(Redirect.class);

 @RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
 public String redirectToIndex(HttpServletRequest request) {
 logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
 return "/index.html";
 }
}
</code></pre>

blocks|key|4485244|text|添加导入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485245|import+{+HashLocationStrategy,+LocationStrategy+}+from+'@angular/common';|code-block|syntax|javascript|4485246|在NgModule+provider中，添加：|4485247|providers:+[{provide:+LocationStrategy,+useClass:+HashLocationStrategy}]|4485248|在应用程序的主index.html文件中，将基本href从/更改为./index.html|offset|length|style|CODE|4485249|该应用程序部署在任何服务器上时，都会给出一个可从任何外部应用程序访问的页面的真实url。|4485250|entityMap^0|0|0|0|0|T|1|X|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Add imports:

<pre><code>import { HashLocationStrategy, LocationStrategy } from '@angular/common';
</code></pre>

And in NgModule provider, add:

<pre><code>providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
</code></pre>

In main index.html File of the App change the base href to <code>./index.html</code> from <code>/</code>

The App when deployed in any server will give a real url for the page which can be accessed from any external application.

blocks|key|4485314|text|我只是在根目录中添加了.htaccess。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485315|<IfModule+mod_rewrite.c>
++++RewriteEngine+On
++++RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-f+[OR]
++++RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-d
++++RewriteRule+%5E+-+[L]
++++RewriteRule+%5E+./index.html
</IfModule>|code-block|syntax|javascript|4485316|在这里，我只是将/index.html中的点‘.’(父目录)添加到./index.html|4485317|确保您在基本路径中的index.html文件是主目录路径，并设置在项目的build中。|4485318|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

i Just adding .htaccess in root.

<pre><code>&lt;IfModule mod_rewrite.c&gt;
 RewriteEngine On
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
 RewriteRule ^ - [L]
 RewriteRule ^ ./index.html
&lt;/IfModule&gt;
</code></pre>

here i just add dot '.'(parent directory) in /index.html to ./index.html 
make sure your index.html file in base path is main directory path and set in build of project.

blocks|key|4485360|text|如果您使用Apache或Nginx作为服务器，则需要创建一个.htaccess|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4485361|<IfModule+mime_module>
++++++AddHandler+application/x-httpd-ea-php72+.php+.php7+.phtml
++++</IfModule>
++++#+php+--+END+cPanel-generated+handler,+do+not+edit

++++<IfModule+mod_rewrite.c>
++++++++RewriteEngine+on

++++++++#+Don't+rewrite+files+or+directories
++++++++RewriteCond+%25{REQUEST_FILENAME}+-f+[OR]
++++++++RewriteCond+%25{REQUEST_FILENAME}+-d
++++++++RewriteRule+%5E+-+[L]

++++++++#+Rewrite+everything+else+to+index.html
++++++++#+to+allow+html5+state+links
++++++++RewriteRule+%5E+index.html+[L]
++++</IfModule>|code-block|syntax|javascript|4485362|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are using Apache or Nginx as a server you need to create a .htaccess

<pre><code>&lt;IfModule mime_module&gt;
 AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
 &lt;/IfModule&gt;
 # php -- END cPanel-generated handler, do not edit

 &lt;IfModule mod_rewrite.c&gt;
 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]
 &lt;/IfModule&gt;
</code></pre>

blocks|key|4486442|text|您可以使用定位策略，在路由文件中添加useHash:+true。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4486443|imports:+[RouterModule.forRoot(routes,+{+useHash:+true+})]|4486444|entityMap^0|I|D|0|0|1M|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

You can use location strategy, Add <code>useHash: true</code> in routing file.
<code>imports: [RouterModule.forRoot(routes, { useHash: true })]</code>

I am using Angular 2.0.0-alpha.30 version. When redirect to a different route, then refresh the browser , its showing Cannot GET /route.

Can you help me with figuring why this error happened.

Angular 2.0 router not working on reloading the browser

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用的是Angular 2.0.0-alpha.30版本。当重定向到不同的路由，然后刷新浏览器，其显示不能获得/route。你能帮我找出为什么会发生这个错误吗？

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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