Skip to content

docs(router): router.navigate() method does not explain some usages #65657

@maartentibau

Description

@maartentibau

Describe the problem that you experienced

The docs on the commands array for a router.nagvigate() might need some extra info.

Usage of ..
Usage of a / and relativeTo

Enter the URL of the topic with the problem

https://angular.dev/guide/routing/navigate-to-routes#programmatic-navigation-to-routes

Describe what you were looking for in the documentation

Usage of ..

So when using .. in a command it doesn't really say anywhere in the docs that if you want to navigate to navigate multiple levels down in the route you need to write this command in a single string.

Example: router.navigate(['../../../', 'foo'], { relativeTo: activatedRoute })

Because one might think that this kind of notation would also be perfectly valid

Example: router.navigate(['..', '..', '..', 'foo'], { relativeTo: activatedRoute })

But that his not the case, this will cause a navigation error.
Link to source code: https://github.com/angular/angular/blame/04101e69ff5e8d9cec527dbb7256ad2f896a55b5/packages/router/src/create_url_tree.ts#L296

In the source code you can clearly see that only the first command is taken into account when dealing with ...

Usage of / and relativeTo

It might be useful to mention in the docs that when using relativeTo you should never prefix your first command with a /. When doing this the whole relativeTo functionality is ignored.

Describe the actions that led you to experience the problem

I was trying to figure out why my routing did not work, since I was under the impression I could split up my .. in separate items in the array instead of needing to write ../...

In the end I dove into the source code to figure it out correctly.

Describe what you want to experience that would fix the problem

I think it would be helpful to other developers if these things would be mentioned in the docs as well.
Even though they might be edge cases, I still think it is very valuable information.

I'm willing to add this to the docs if needed 🙂

Add a screenshot if that helps illustrate the problem

I made an stackblitz project, to illustrate the issue.

https://stackblitz.com/edit/stackblitz-router-docs-issue?file=src%2Fjef%2Fdetail%2Fdetail.ts

So in the file jef/detail/detail.ts you will find a commented piece of code that shows the exact problem.
If you uncomment that part and command the existing method, you will be able to recreate the issue.

To get to this page in the app you need to do these steps:

  • click on button JOHN
  • click on button Detail
  • click on button Detail --> Jef
  • now you're on jef/detail/detail.ts page

You can also just modify the URL and directly go to the page 1/2/jef/123

If this problem caused an exception or error, please paste it here

.webcontainer@runtime.cf284e50.js:26 ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: '5/6/jef/../john/444'

If the problem is browser-specific, please specify the device, OS, browser, and version


Provide any additional information here in as much as detail as you can


Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions