Why can't I change href programmatically when Angular Service worker is used?

Question

I'm trying to change a link's href programmatically in an external webpage that uses an Angular Service worker.

The link looks like <a _ngcontent-c32="" href="/something">Something</a> and uses this EventListener:

function(e){if(e=e||t.event){var n=this||e.target||t,r=n[C[e.type][f]];if(r)if(1===r.length)y(r[0],n,e);else for(var i=r.slice(),o=0;o<i.length&&(!e||!0!==e[z]);o++)y(i[o],n,e)}}

When I run document.querySelector('a').setAttribute('href', '/something-else') or document.querySelector('a').href = '/something-else' I can see the href did technically get changed, but the webpage completely ignores it when I click the link and uses the original href instead.

Is there something I can do to make the Service Worker be aware of this change?

Answer 1

first try to use angular property [attr.href] or [href] and by using this you can change url programmatically by using ternary condition.

<a [href]="reverse ? 'https://stackoverflow.com/questions/53492185/why-cant-i-change-href-programmatically-in-angular' : 'https://material.angular.io/components/select/overview'" target="_blank">click here</a>

Note: these both properties will not append base URL so you need to specify complete path.