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

Angular 2 Remove Hash (#) from the URL – SEO

I am trying to remove the # sign from the url in Angular 2 but I couldn’t find any good explanation about how to remove it without generate any problem.

I remember on AngularJS 1 it was easier adding $locationProvider.html5Mode(true);

Also I would appreciate if you can tell me if this is a good practice (removing #) or could affect the SEO for the application (or improve it).

PS: I am using Angular 2 with typescript

Tags:

3

Answers


  1. 0

    In angular there is location strategy

    Look into app.module.ts where app is bootstrapped there you have 

    @NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});

    And remove this part since PathLocationStrategy is default strategy

    Login or Signup to reply.
  2. 0

    As @Volodymyr Bilyachat pointed out, PathLocationStrategy is a default location strategy in Angular2, and if the # is present in the url, it must have been that’s overridden somewhere.

    Beside the module providers, check your module imports, it can also be overridden by providing the { useHash: true } as the second argument of the RouterModule.forRoot:

    imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

    Also note that when using PathLocationStrategy you need to configure your web server to serve index.html (app’s entry point) for all requested locations.

    Here are configuration examples for some of the popular web servers: https://angular.io/guide/deployment#fallback-configuration-examples

    Login or Signup to reply.
  3. 0

    Above answers have the correct explanation about removing the Hash from the URL, but when you change LocationStrategy your back-end will be affected because the back-end doesn’t understand all of your Angular 2 Routes. Here are the steps to remove hash with the back-end support.

    1) Change Angular to use PathLocationStrategy

    @NgModule({
  .....
  providers: [
    // Below line is optional as default LocationStrategy is PathLocationStrategy
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ]
})

    2) Change the base Href in index.html, Angular2 will handle all routes post base Href

    <base href="/app-context/">

    For example 

    <base href="/app/">

    3) At the backend server, we must render the index.html file for any request coming with below pattern

    "/app/**" - Render index.html for any request coming with "/app/**" pattern

    index.html

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search