Routing stops working with no errors being shown

[BnSmth]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

Yes

Description

I have a simple front end blog application that I'm having issues with the routing for (please see link to the source). The site has three routes, a "home" page listing the posts on the blog, a "contact" page with some simple contact details and a "post" page for showing a specific post.

When loading the home page for the first time, the posts are loaded and links are shown to the relevant pages. Clicking on a post will correctly navigate to the post page and the post is shown. However, if I then navigate back to the home page, the posts are still loaded, however the links do not direct me to the post page anymore despite the url showing the correct link in the bottom left of the browser.

I can also recreate the problem if I refresh on a post page, and then navigate to the home page, where again, none of the links are working.

There are no errors that I can see in the console and I have tried everything that I can think of to debug this issue but to no avail. I am wondering if this is an issue with a recent version of the framework as it doesn't seem like a particularly difficult thing to do.

Any help would be greatly appreciated! Thanks

Please provide a link to a minimal reproduction of the bug

https://github.com/BnSmth/angular

Please provide the exception or error you saw

No error

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 21.7.3 (Unsupported)
Package Manager: npm 10.5.0
OS: darwin x64

Angular: 17.3.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.5

Warning: The current version of Node (21.7.3) is not supported by Angular.

Anything else?

No response

[garrettld]

You're providing the Router class in a couple components. The Router should only be provided once, in the root, with provideRouter.

Re-providing it causes the child Router to be destroyed when the view that provides it is destroyed, which completes the navigation transitions observable, so the root router never sees any additional navigation events. Your app should work normally if you remove Router from your component providers arrays.

It would be nice if there was a runtime warning when multiple Router instances were detected.

[jamesmcging]

You're providing the Router class in a couple components. The Router should only be provided once, in the root, with provideRouter.

Re-providing it causes the child Router to be destroyed when the view that provides it is destroyed, which completes the navigation transitions observable, so the root router never sees any additional navigation events. Your app should work normally if you remove Router from your component providers arrays.

It would be nice if there was a runtime warning when multiple Router instances were detected.

@garrettld, you're a star, I've just spent 3 days trying to work out why exactly this was happening to me and you answered in your first line.

[BnSmth]

Thank you so much @garrettld, that's resolved the issue. Totally agree that some sort of warning should be raised if multiple instances are detected (at least when running in dev mode). Thanks again, this was an incredibly frustrating issue that was really bumming me out!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}