Removing # from URL does not work after deployment - HTTP 404

Question

I am trying to get rid ot #-red URLs in my Angular app (Google recommends it in the case that your app does not present indexable content on the first load). The web application is in the static/ directory of my Spring Boot application.

So I disabled the use of #:

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

On my local machine evereything works fine e.g.

http://localhost:4200/cars/berlin

lists all cars in Berlin but

http://www.example.com/cars/berlin

Gives me HTTP 404 after deploying the site.

I'm not sure why this happens. How can I fix this?

However, the root URL http://example.com is working correctly. The content of the website is displayed but any page below cannot be reached.

score 0 · Answer 1 · answered Dec 21 '18 at 08:21

0

You need to configure URL rewriting in your web-server. The configurations are different for different web-servers. Using # in the url tells Angular the start of the main page url and the SPA logic works using that. Without # Angular can't detect the main page start. So you need to configure it in the web-server configurations.

answered Dec 21 '18 at 08:21

Suren Srapyan

66,568
14
114
112

Does this mean I have to re-write the URLs on my server? E.g. a http://example.com/cars/berlin to http://example.com/#/cars/berlin ? But why is this working on my local machine? – Stefan Falk Dec 21 '18 at 08:24
It can be configured in your local. Not for all specific url. You just set the url of `index.html` – Suren Srapyan Dec 21 '18 at 08:26
Sorry, I can't follow you there. What do you mean by "set the url of `index.html`? But from your answer I get that I'll have to do something like this: https://stackoverflow.com/questions/24837715/spring-boot-with-angularjs-html5mode – Stefan Falk Dec 21 '18 at 08:28
What server do you use? – Suren Srapyan Dec 21 '18 at 08:32
Spring Boot in particular – Stefan Falk Dec 21 '18 at 08:32
Not backend part, but the web-server under which application will be hosted – Suren Srapyan Dec 21 '18 at 09:28
That should be Tomcat but I don't really see me messing with that :D – Stefan Falk Dec 21 '18 at 12:44

score 0 · Answer 2 · answered Dec 21 '18 at 08:36

0

You need to reset requested route to index.html

This might help:

https://angular.io/guide/deployment#server-configuration

answered Dec 21 '18 at 08:36

zmag

7,825
12
32
42

Sorry I don't really understand what that does. Does http://example.com/cars/berlin become http://example.com/index.html/cars/berlin or what is the effect? – Stefan Falk Dec 21 '18 at 08:47
@StefanFalk When `http://www.example.com/cars/berlin` is requested, server catches that and looks for what it can do with `/cars/berlin`. When using Angular, it shoud simply pass the `/index.html` and let client do rest of work. – zmag Dec 21 '18 at 08:52

score 0 · Answer 3 · answered Dec 21 '18 at 10:07

Try this:- Make the Build of the project & just go to dist folder & create one file name ".htaccess" & paste the below code in it

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

& save it or For more refrence please refer this link

https://github.com/angular/angular-cli/issues/5113

Stefan Falk · Accepted Answer · 2018-12-21T20:12:12.977

This is what I ended up doing. It is simpler as the length of this answer might suggest.

1) Move apps to separate paths

I moved all my apps (there are two at the moment) to sub-directories. This means that all my apps are required to work under a base-href as in

www.example.com/admin-tool/index.html
www.example.com/web/index.html

This is the ng command I am using to build the admin-tool app:

#!/usr/bin/env bash

BASE_HREF=admin-tool

ng build --aot --prod --base-href /$BASE_HREF/ --output-hashing none --output-path dist/$BASE_HREF --deploy-url /$BASE_HREF/

2) Move apps to the Spring project

Move/copy the content in dist/ (the output of the ng build) to (in my case) src/main/resources/static if you're not building it there already:

src/main/resources/static/admin-tool
src/main/resources/static/web

3) Do the necessary forwarding

As mentioned in other answers one now has to forward requests to the respective index.html "files" (let's just call it like that).

Here is why (as I understand it): Before we did all this, Angular just worked on #-ed path which caused the JS code to do the updates based on what's after the #. And if I'm getting it right - removing the # will essentially mean that the browser is now making GET requests for all those URLs. So from the cars example, if I have a place/route http://www.example.com/web/cars/berlin then this will now be a GET request which the server has to handle - in this case forward it to the correct endpoint.

Below is the code I am using in my backend to accomplish this:

@Controller
public class ForwardController {

    @RequestMapping(value = "/*")
    public String rectRoot(HttpServletRequest request) {
        return "forward:/web/index.html";
    }

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect(HttpServletRequest request) {

        if (request.getRequestURI().startsWith("/admin-tool")) {
            return "forward:/admin-tool/index.html";
        } else if (request.getRequestURI().startsWith("/web")) {
            return "forward:/web/index.html";
        }

        return "forward:/web/index.html";
    }
}

I don't give it a 100% yet, and I really hope this is just a workaround, but so far I am not having any issues with it.

Now here is why I am doing all this:

Apparently it's recommended to move away from #-ed paths for several reasons. Since I am using Angular, I'll have to walk a few more miles in order to get search engine optimization (SEO) going but from what I get ([1], [2], [3]) you should avoid it since Google does not index it. They might only use it as an anchor but if you have AJAX content behind your # you're going to have a bad time.

See further [4] about #! which also seems to be deprecated by now and also take a look at [5] and [6].

[1] https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo

[2] https://www.seroundtable.com/google-no-hashtags-in-urls-26537.html

[3] https://www.seroundtable.com/google-no-url-fragments-23449.html

[4] https://webmasters.stackexchange.com/a/18606/64452

[5] https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

[6] https://snipcart.com/blog/angular-seo-universal-server-side-rendering