Geek Answers Handbook

AngularJS removes # and has error updating page

I have AngularJS webapp and start with Tomcat 7 . Using $locationProvider.html5Mode(true) , I remove hash '#' from url

 localhost:8080/App/#/login -> localhost:8080/App/login

But now when I update localhost:8080/App/login , I have a 404 error . How to configure Tomcat7 to update localhost:8080/App/login ?

app.config:

 $urlRouterProvider.otherwise("/login/"); $stateProvider .state('home', { abstract: true, templateUrl: 'dist/view/home.html', controller: 'HomeCtrl' }); $locationProvider.html5Mode(true);

index.html

 <head> <meta charset="utf-8"> <script> document.write('<base href="' + document.location + '" />'); </script> </head>
+6
source share
7 answers

This is because when you perform a full reboot, you always send a request to the server with the current URL. Since Angular is not loaded yet, it cannot process the route, and the server does not know anything about which routes exist in Angular and not

Without html5mode Angular, fragmented URLs like www.example.com/#/page . # was originally used to bind links, so by convention, the fragmented part of the URL is completely ignored by the server. For the server, this request will be the same as only www.example.com/ , which is probably located where index.html is located. Therefore, reloading your page in this case will receive your index.html, which will load Angular, which in turn will process the fragmented part of the URL (# / page).

With html5mode, however, the snippet is hidden and the URL looks like a regular url, www.example.com/page . But when you reload the page, the server does not receive the fragment, so it tries to find everything that is served under the / page, which is probably nothing. Giving you 404, Angular cannot load, as index.html is not loaded and you have a broken page.

The usual way to fix this is for the server to serve index.html under all URLs that don't match the static resource (or the pattern of one). Therefore, if you ask to say an image, it will find it and return it normally, but if you request / the page (and it does not exist as a static asset), then it returns index.html. Then Angular will start, read the URL and activate the correct route.

I just did it in nginx, so I don’t know how Tomcat will do it, but the principle should be the same.

+8
source

1) Download urlrewritefilter-4.0.3.jar

2) Create a WEB-INF folder in the root directory where index.html is present.

3) Create a lib folder in WEB-INF and put the downloaded jar file into it.

4) Create a web.xml file in WEB-INF. Paste the following code into it.

 <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata complete="true"> <display-name>Welcome to Tomcat</display-name><description>Welcome to Tomcat</description><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list> <filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping><filter-name>UrlRewriteFilter</filter-name><urlpattern>/*</url-pattern><dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping></web-app>

5) Create urlrewrite.xml WEB-INF

enter the following code into it

 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC-//tuckey.org//DTD UrlRewrite 3.2//EN" "http://tuckey.org/res/dtds/urlrewrite3.2.dtd"><urlrewrite> <rule enabled="true"> <from>/[0-9_-a-zA-Z\/]+$</from> <to>/%{context-path}/</to> </rule>/urlrewrite>

This uses Tomcat 7 and Tucky urlrewritefilter https://github.com/paultuckey/urlrewritefilter

@mhatch. To honor the routes to all, go to index.html, you can try this rewrite rule:

 <rule enabled="true"> <from>/[0-9_-a-zA-Z\/]+$</from> <to>/%{context-path}/</to>

It worked for me.

+1
source

1) AngularJS

 $routeProvider .when('/path', { templateUrl: 'path.html', }); $locationProvider .html5Mode(true);

2) server side, just put .htaccess inside your root folder and paste this

 ewriteEngine On Options FollowSymLinks RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /#/$1 [L]

Greeting....

0
source

Eric Honn gives a good explanation of logic. Here's how I solved it using Jersey and Tomcat 7 with Tucky urlrewritefilter https://github.com/paultuckey/urlrewritefilter

  • Add dependency using Maven or load jar.

     <dependency> <groupId>org.tuckey</groupId> <artifactId>urlrewritefilter</artifactId> <version>4.0.3</version> </dependency>

  • Add filter mappings to the web.xml file located in the WEB-INF directory. This should be in the tag of the web application.

     <filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> </filter> <filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>

  • Create a file in WEB-INF called urlrewrite.xml and add the redirect to index.html

     <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN" "http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd"> <!-- Configuration file for UrlRewriteFilter http://www.tuckey.org/urlrewrite/ --> <urlrewrite> <rule> <from>^/titles$</from> <to>index.html</to> </rule> <rule> <from>^/authors$</from> <to>index.html</to> </rule> <rule> <from>^/courses$</from> <to>index.html</to> </rule> <rule> <from>^/account$</from> <to>index.html</to> </rule> </urlrewrite>

Remember to restart so that xml is configured. It would be great if someone knew how to associate routes with everyone, go to index.html instead of setting separate rules.

0
source

If you want to remove the hash (#), you must use the rewrite function on the server to serve the index.html path for everyone. If not, you will always get 404 error. This means that you can redirect 404 to index.html .

Apache: add a rewrite rule to the .htaccess file as shown here:

 RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

NGinx: use try_files as described in the front controller template web applications, modified to serve index.html :

 try_files $uri $uri/ /index.html;

IIS: add a rewrite rule to web.config , similar to the one shown here:

 <system .webserver=""> <rewrite> <rules> <rule name="Angular Routes" stopprocessing="true"> <match url=".*"> <conditions logicalgrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"> <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"> </add></add></conditions> <action type="Rewrite" url="/"> </action></match></rule> </rules> </rewrite> </system>

In tomcat you can add it to web.xml:

 <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <error-page> <error-code>404</error-code> <location>/</location> </error-page> </web-app>

After redirecting the web path to index.html the HTML5 history API will be used in Angular JS to control the web route. Our main task here is simply to allow index.html be called on the server.

0
source

Just write it in htaccess

  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.php [L]

I don't have index.html I am index.php , so I wrote index.php instead of index.html

Hooray!

0
source

I recently found a solution to this problem that is not related to switching to Apache2 with a .htaccess file.

In web.xml:

 <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <error-page> <error-code>404</error-code> <location>/rewrite-404.jsp</location> </error-page>

Then create a new file in WebContent called rewrite-404.jsp:

 <% response.setStatus(HttpServletResponse.SC_OK); %> <%@ include file="index.html" %>

This will cause existing files in WebContent to execute as usual, and all requests that usually return a 404 error to return index.html instead of a 200 (OK) response code.

0
source

More articles:


All Articles