Dealing with %23 replacing id # in angular routing.

Question

The problem:

I have a express backend/angularjs frontend web app hosting all of my teams documentation for our users. We frequently need to post links to a specific question (all linked as ids) to our users in Slack. ex. helpapp.com/productTheyNeedHelpWith#QuestionLinkedTo the problem is that when the link is clicked from slack, not when copy/pasted, Slack launches a new browser window/tab to helpapp.com/productTheyNeedHelpWith%23QuestionLinkedTo.

This breaks ngRoute as it no longer recognizes /productTheyNeedHelpWith as the path to load the correct page for and the user gets sent to our home page instead.

Thoughts on possible solutions:

I'd like to solve this issue either in the ngRouting itself by somehow updating the path by replacing %23 with # before $routeProvider does it's magic, or by somehow capturing the full url in app.js and updating it or redirect to an updated version before we've rendered a page view at all.

currently I've set a workaround by using a ng-init event to check the url and, if %23 is found, update it and replace it with the correct extension but this causes an odd double load that leads to a poor user experience.

Final Thoughts:

As I'm not sure of the best way to go about this, and because our code is proprietary, I'm avoiding posting to much 'example code' that may not be relevant but am happy to provide any parts of it that you, wonderful stackoverflowers, may request. Thank you in advance for your assistance.

Answer 1

Definitely too late for you, but for anyone stumbling upon this link struggling... I had a slightly different situation, I needed to jump to an id on my current page from the footer. But the current page url was different every time.

What worked for me was just using href={{routeUrl}} instead of routerLink. In my case routeUrl was the current route + "#nav". With href this didn't encode it to %23, but it did with routerLink. We're using Angular 14.

Answer 2

I had the same problem using angular router (this.router.navigate([...]). I solved it using 'navigate by url' instead:

import { Router } from '@angular/router';
constructor(
private readonly router: Router,
) {}

this.router.navigateByUrl(url) // replace 'url' with whatever you'd like.

So I guess one work around would be to add a click listener to your element and do the routing in your TS component using this method. I know it's not the exact answer you're looking for, but it worked for me. Note, this excepts a string, so unlike 'this.router.navigate', you don't use the [] brackets.