seo Question posted in
Some basic information to get you started with this can be found here.

Removing # from URL does not work after deployment – HTTP 404 – SEO

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.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 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.

    Login or Signup to reply.
  3. 0

    You need to reset requested route to index.html

    This might help:

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

    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search