Angular get full url for a route

Question

Wondering if there is a way to retrieve full url for a given route?

In Angular app you might use router.navigate('...') which will immediately navigate your browser to given route, but is there a way just to build URL string?

Use case for this is communication with 3rd party services like OAuth2 where I need to provide callback url, I wish not to build it by hands but call something like router.urlFor('callback') which will produce something like "http://localhost:4200/callback"

There is Location service which has prepareExternalUrl but unfortunately it is not what is needed

Edit:

At moment seems that it is not possible and there is no easy out of the box solution, but after looking around at sources find following solution:

const urlTree = router.createUrlTree(['callback'], {
    queryParams: { foo: 'bar' },
    fragment: 'acme'
});
const path = location.prepareExternalUrl(urlTree.toString());
const url = window.location.origin + path;
console.log(url); // http://localhost:4200/callback?foo=bar#acme

createrUrlTree is being called underneath routerLink directive

Answer 1

You could try this :

import { Component } from '@angular/core'; import { Router } from '@angular/router';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'] }) export class AppComponent {   title = 'stackoverflow';   constructor(private router: Router) {     console.log(this.router['location']._platformLocation.location.origin);     // result: http://localhost:4200   } } 

Answer 2

You can get baseurl with the following code on javascript

const parsedUrl = new URL(window.location.href);
const baseUrl = parsedUrl.origin;
console.log(baseUrl);

and then concatenate it with for example /callback to make

http://localhost:4200/callback