15

In my Angualar 2 (final) application I need often to create a full (absolute) Url by a route name (like '/products'), e.g. to provide a permalink to a specific page or to open a page from a component in another tab/window.

Is any Angular 2 API, which allow to get an absolute Url by a route name? If no, is some known woraround for, e.g. using javascript?

I've tried location or PathLocationStrategy (e.g. prepareExternalUrl), but the method returns '/products' instead of e.g. http://localhost/products

Alexander Zwitbaum
  • 4,776
  • 4
  • 48
  • 55
  • Did you try using `window.location.host` concatenated with the return of `prepareExternalUrl`? Why do you need it? `routerLink` isn't enough? – Bruno João Jan 03 '17 at 17:07
  • 1
    The window.location.host does not contains a full base Url, e.g. for http://localhost.8000/virt_sites/virt_dir/test.html we expect "http://localhost.8000/virt_sites/virt_dir" instead of "http://localhost.8000". I need to open a project page in the new window from the component (not from the view!) using e.g. the window.open(absoluteUrl, '_blank'). Is it possible with routerLink? I think no. – Alexander Zwitbaum Jan 05 '17 at 10:54

3 Answers3

5

You can use PlatformLocation to get the base_url, then you can concatenate with the return of prepareExternalUrl:

    import { PlatformLocation } from '@angular/common';

    export class MyComponent {
        constructor(
            private platformLocation: PlatformLocation
        ){
            this.logAppStart(platformLocation);
        }

        private logAppStart(platformLocation: any){ // CHANGED THE TYPE TO ANY TO BE ABLE TO ACCESS THE LOCATION PROPERTY
            console.log(platformLocation.location); // HERE YOU FIND WHAT YOU NEED
        }
    }

Found here

Community
  • 1
  • 1
Bruno João
  • 5,105
  • 2
  • 21
  • 26
  • PlatformLocation.location returns a wrong information, e.g. for "http://localhost:20623/welcome" returns the same string instead of the base url "http://localhost:20623". In my answer I could reolve the correct base url, but not directly with angular 2 component. – Alexander Zwitbaum Jan 05 '17 at 16:56
  • Seems it's `platformLocation.origin`, not `platformLocation.location` – Alireza Mirian Aug 23 '17 at 08:20
  • 1
    what about hash # urls ? – Kamil Kiełczewski Apr 08 '20 at 12:21
  • I combined this answer with the one from @SamanMahamadi to build the route I wanted, I didn't have a need for # urls though (and avoiding the need for window.location). – jackofallcode Nov 09 '20 at 21:31
  • 1
    Downvoting this. Because, from the Angular docs for `PlatformLocation`: > This class should not be used directly by an application developer. Instead, use Location. – Brad Johnson Sep 22 '21 at 22:48
4

The only solution I've found for now

import { Router } from '@angular/router';
[...]

constructor(private _router: Router) { }

  redirectNewWindow() {    
  const internalUrl = '/products';

  // Resolve the base url as the full absolute url subtract the relative url.
  var currentAbsoluteUrl = window.location.href;
  var currentRelativeUrl = this._router.url;
  var index = currentAbsoluteUrl.indexOf(currentRelativeUrl);
  var baseUrl = currentAbsoluteUrl.substring(0, index);

  // Concatenate the urls to construct the desired absolute url.
  window.open(baseUrl + internalUrl, '_blank');
}
Alexander Zwitbaum
  • 4,776
  • 4
  • 48
  • 55
3
import { Router } from '@angular/router';

[...]

constructor(private router: Router) { 
  let absoluteUrl = window.location.origin + this.router.createUrlTree(['/products']);
}
Saman Mohamadi
  • 4,454
  • 4
  • 38
  • 58