Angular: Some routes use PathLocationStrategy but some other routes use HashLocationStrategy

Question

I have 4 routes in my app.routes.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const pageRoutes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'transaction', loadChildren: './app/transaction.module#TransactionModule'},
  {path: 'evidence', loadChildren: './app/evidence.module#EvidenceModule'}
];

@NgModule({
  imports: [RouterModule.forRoot(pageRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

In the app.routes, I didn't do any specific setup for LocationStrategy. Since for the transaction route, I want to use the angular2 default PathLocationStrategy, which doesn't allow the user to refresh the page.

But for the evidence route, I actually want the users to be able to refresh the page. So I'd like to use HashLocationStrategy here.

This is the evidence-routing.module

    @NgModule({

          imports: [RouterModule.forChild([
            {path:':sessionId', component: EvidenceComponent}
            { path: '**', redirectTo: '/404' },
            { path: '404', component: PageNotFoundComponent}
          ])], 
          exports: [RouterModule],
          providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

    })
    export class EvidenceRoutingModule {}

I wanted to add providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] inside evidence-routing.module to enable HashLocationStrategy and only apply to this route.

But once I put it there, the entire application will adopt the HashLocationStrategy, it also works for the transaction route.

I couldn't find any good solutions to handle this.

Any advice on this issue?

Many Thanks!

score 2 · Accepted Answer · answered Aug 04 '17 at 15:16

You can't use a different LocationStrategy for different routes, this setting is for the Router, not for routes, and there can only be exactly one router for one application.

You should rather ensure the server is configured properly, then reload will work for all routes even with PathLocationStrategy.

Ensure your server is configured to support HTML5 pushState.
This just means that the server returns index.html for requests to unknown resources.

Angular: Some routes use PathLocationStrategy but some other routes use HashLocationStrategy

1 Answers1

Linked