Skip to content
Ashish Doneriya edited this page Dec 21, 2016 · 2 revisions

Unlike angularjs, In Angular 2 you will notice that your url's no longer have those ugly # symbols in them. That's nice. But if you hit F5/Refresh in the browser, or if you try to email these links to a friend, the browser returns with a "Page Not Found" error. That's not nice.

How do you fix it?

You fix it with url rewriting. You configure your server to rewrite all requests to index.html.

There's more than one way to implement a url rewriting.

Here's what I did...

I downloaded tuckey

I put this in my web.xml right after <web-app>:

<filter-name>UrlRewriteFilter</filter-name>

<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class><init-param> 

<param-name>logLevel</param-name>  

<param-value>DEBUG</param-value>  

</init-param>  

I added this filter mapping:

<filter-name>UrlRewriteFilter</filter-name>

<url-pattern>/*</url-pattern>

<dispatcher>REQUEST</dispatcher>

<dispatcher>FORWARD</dispatcher>

I added the following to my libraryDependencies in build.sbt:

"org.tuckey" % "urlrewritefilter" % "4.0.3" % "container"

In added this <base> tag to my index.html file right after the <head> tag:

<base href="http://www.littlebluebird.com/gf/app/" />

gf is my webapp context. app is the parent directory of all of the html, css, js files: https://github.com/bdunklau/LittleBlueBird/tree/master/src/main/webapp/app

Finally, I added a file to a file named urlrewrite.xml to WEB-INF. This file contains the rewrite rules that tuckey looks for.

Here's what my rewrite rules look like right now. They are incomplete. I'll be adding more as my app develops.

<rule match-type="wildcard">
  <from>*/*/login</from>
  <to>index.html</to>
</rule>

<rule match-type="wildcard">
  <from>*/*/events</from>
  <to>index.html</to>
</rule>

<rule match-type="wildcard">
  <from>*/*/friends</from>
  <to>index.html</to>
</rule>

<rule match-type="wildcard">
  <from>*/*/me</from>
  <to>index.html</to>
</rule>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.