router.navigate VS router.navigateByUrl

i didnt find any clear difference just patch the url or create a new one can you clearify this for me and thnx in advance

have you looked in the sources? Also, check out this answer on SO.


Welcome to our community! :blush:

The main difference is that Router#navigate navigates relative to a route, by default the full current route path. Router#navigateByUrl always accepts an absolute route path (not relative).

The documentation has this to say:

The first parameter of navigate() is a delta to be applied to the current URL or the one provided in the relativeTo property of the second parameter (the NavigationExtras ).

1 Like

if you take a look into the sources you can see that in the navigate method, it first builds a URL tree as @Layzee said relative to a route and after that calls navigateByUrl

navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}): {
    return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
1 Like

yes i’ve came from your reply and this reply but didnt understant what is (popup:compose) & for the other answer what is start point

what is the difference between navigates relative or navigates absolute

1 Like

it’s whar i’m looking for
when can use both

Thank you for pointing out which part you’re wondering about. Let me create an example later or maybe someone else will beat me to it :slightly_smiling_face:

1 Like

Let me try with an analogy of navigating a file system. I’m assuming Windows, but it’s really the same across all operating systems.

Say that C:\Users\Omario is your current working directory in a terminal.

If you execute cd Documents, you will end up in C:\Users\Omario\Documents. That’s a relative navigation.

If you execute cd ..\, you will end up in C:\Users. That’s also a relative navigation.

If you execute cd C:\Windows\System32, you will end up in that directory, since you passed an absolute path. That’s an absolute navigation.

If you execute cd C:\Users\Omario\Documents\E-books\Angular, that’s also an absolute navigation.

Even if you execute cd C:\Users\Omario\Pictures, that’s also an absolute navigation.

Now you know what a relative path and an absolute path is.

The only additional thing you should know about the Angular router’s navigation methods, is that you can pass in a path and an ActivatedRoute (as the relativeTo option) to the navigate method. This will navigate to a route path relative to that route’s path.

This would correspond to executing this imaginary command in your terminal

cd ..\Windows\System32 --cwd=C:\Users

which would navigate to C:\Windows\System32.


thank you alot for your reply