CODEWITHSUNDEEP
angularroutes
Jacopo Sciampi
Jacopo Sciampi

Reputation: 3432

Routing with hidden path

I have this basic route:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: WidgetComponent
  },
  {
    path: 'P3',
    component: DashboardComponent
  },
  {
    path: 'NN',
    component: DashboardComponent
  },
  {
      path: '**',
      redirectTo: ''
  }
];

and it works pretty fine. When i navigate to .../p3 it load my component.

Now, the url that load isn't just this one above. But something like this:

localhost:4200/P3?p1=hello&p2=world

But it still works fine in serve.

When I build the App and publish it, I have this problem: by navigating directly to localhost:4200/P3?p1=hello&p2=world the server response is a This page cannot be found on the server, and I managed to understand that is the P3 the problem. So I've added the HashLocationStrategy in my module:

{ provide: LocationStrategy, useClass: HashLocationStrategy },

so now my url is this :

<server>/#/P3?p1=hello&p2=world

and this solved my problem.

My question is: Is there a better way to do this? I was thinking, is it possible to hide just the P3 in the url? I saw on the documentation that there is skipLocationChange: true to set to the route's NavigationExtras but It doesn't satisfied me.

Anyone has an idea?

Upvotes: 0

Views: 391

Answers (1)

Sunil
Sunil

Reputation: 11243

The default location strategy PathLocationStrategy which is most acceptable one. This is the default strategy in Angular and takes advantage of new HTML5 API called pushstate (from the HTML5 history API). Adding # into the url it makes little noisy. So avoid HashLocationStrategy.

If you have issue with it then you might did not add the base href. Just check head section of your index.html

<base href="/app"/>

Upvotes: 1

Related Questions