Angular2 hashed urls get current url

Question

I have defined my routes like following:

const appRoutes: Routes = [
{
  path: 'auth',
  component: AuthenticationComponent,
},
{
  path: '',
  component: HomeComponent,
  canActivate:[AuthenticationGuard],
  children:[
  {
    path: 'list',
    component: TaskListComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'create',
    component: CreateTaskComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'agreement',
    component: UserAgreementComponent,
    canActivate:[AuthenticationGuard]
  },
  ]

},

];

And I navigate on them like following:

<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="#/list">List</a>
    <a class="mdl-navigation__link" href="#/create">Create</a>
    <a class="mdl-navigation__link" href="#/profile">Profile <span *ngIf="profileNotPresent" mdl-badge="Start"></span> </a>
    <button class="mdl-button mdl-js-button" (click)="logout()">
        <i class="material-icons">exit_to_app</i>
    </button>
</nav>

I had to add hash because when I deployed the app it started throwing me 404 error for routes. With hashed urls it works.

However in my code I had a condition where I was showing a div on condition that was true if it was the base route:

if(this.router.url == '/'){
    this.showHomeContent=true;
}

that time without hash my urls were '/', '/profile' etc and it used to work corrrrectly. Now they are '#', '#/profile' etc and this condition no longer works resulting in that specific div always remains open.

How can I fix this?

Does just adding a hash work? == #/

DeborahK
– DeborahK

2017-08-09 22:25:21 +00:00
Commented Aug 9, 2017 at 22:25 — DeborahK
– DeborahK, Commented Aug 9, 2017 at 22:25

Yakov Fain · Accepted Answer · 2017-08-09 22:25:49Z

1

You need start using Angular router for navigation. I mean [routerLink] instead of href. Without the # you may be getting 404 if you enter a URL the trying to get a to a not-known resource. By default, Angular uses PathLocationStrategy, which makes a server request in this situation.

If you'd be using Router navigation, you could fix this issue by configuring a redirect to the index.html, and then the router would navigate properly.

So start using the Router properly, and in your app module add this:

 providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]

The Router will be adding a #-sign to the URLs and won't be making server-side requests resulting in 404. But again, replace your hrefs with the routerLink directives first.

answered Aug 9, 2017 at 22:25

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zze Over a year ago

I agree with this, using routerLink is a must when navigating within an angular application.

Vic · Accepted Answer · 2017-08-09 22:32:50Z

0

It's kinda explained in the docs - PathLocationStrategy

Router supports two kinds of strategies PathLocationStrategy and HashLocationStrategy

If you use PathLocationStrategy you must provide APP_BASE_HREF or insert in your index.html head the <base href="/">

This should fix your issue.

answered Aug 9, 2017 at 22:32

Vic

4244 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular2 hashed urls get current url

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related