[Bug] Navigation links do not work when using baseHref

[semicolin]

Is this a regression?

I don't know

Description

When I build my ng-doc app with ng build --base-href=/my-site/ (for publishing to GitHub Pages) or set baseHref option in angular.json and run it with ng serve, the navigation links (in both the left menu and next/prev) throw the following error. The routes work correctly if I enter the URL directly into the browser. Links that were generated from markdown display the wrong URL on hover, but work correctly when I click on them.

Please provide the exception or error you saw

core.mjs:8506 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'my-site/getting-started/installation'
Error: NG04002: Cannot match any routes. URL Segment: 'my-site/getting-started/installation'
    at ApplyRedirects.noMatchError (router.mjs:3614:16)
    at router.mjs:3596:28
    at catchError.js:10:39
    at OperatorSubscriber._error (OperatorSubscriber.js:23:21)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:23999:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23999:36)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Object.onInvokeTask (core.mjs:24300:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)

OS

Unix (Linux, macOS, etc.)

Browser

Chrome

Node version

18.12.1

Anything else?

No response

[skoropadas]

Good catch thanks! I'll fix it right now

[github-actions]

🎉 This issue has been resolved in version 15.7.10 🎉

The release is available on:

• v15.7.10
• GitHub release

Your semantic-release bot 📦🚀

[semicolin]

Thanks for the quick fix, but I think using replace() here is not a good idea because my API scope is also the same string as my baseHref, so this breaks links to API pages.

[semicolin]

And even if I change the API scope name, links generated from markdown (e.g. to API pages) do not work when opening them in a new tab

[skoropadas]

Ah I see, ok let me think about a better solution maybe I will be able to prepare HTML and update href attributes on the builder side

[skoropadas]

I found a solution that I had considered during development but decided against because I thought it was unnecessary. However, now I see that it is necessary.

The problem was that although the handler used Angular Router, when hovering over a link, an incorrect address was still displayed because the actual address in the href attribute was not changing. It was only modified when attempting to navigate to the link.

I removed the code in NgDocRootComponent that handled link clicks, which sometimes intercepted clicks on links created using routerLink, leading to unexpected consequences if the URL was not properly processed, or if clicks on links in the demo were being handled when they shouldn't be.

I could have modified these links on the builder side, but that wouldn't have solved the problem of click handling in NgDocRootComponent.

Solution:
NgDoc has a mechanism for processors, which I use to convert certain HTML elements created using innerHTML into Angular components. Therefore, I added a new processor for links that wraps each link on the page in NgDocPageLinkComponent.

NgDocPageLinkComponent uses the routerLink directive, which you know modifies the link passed to it by adding baseHref, so everything should work natively through Angular Router without creating problems with baseHref.

[github-actions]

🎉 This issue has been resolved in version 15.7.11 🎉

The release is available on:

• v15.7.11
• GitHub release

Your semantic-release bot 📦🚀

[skoropadas]

Sry, I added another fix, I forgot about links in code examples and demos that are generated based on keywords

[github-actions]

🎉 This issue has been resolved in version 15.7.12 🎉

The release is available on:

• v15.7.12
• GitHub release

Your semantic-release bot 📦🚀

[semicolin]

Looks good. Thank you!