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

Improve this question
2
  • Did you try using window.location.host concatenated with the return of prepareExternalUrl? Why do you need it? routerLink isn't enough? Commented Jan 3, 2017 at 17:07
  • 1
    The window.location.host does not contains a full base Url, e.g. for localhost.8000/virt_sites/virt_dir/test.html we expect "localhost.8000/virt_sites/virt_dir" instead of "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. Commented Jan 5, 2017 at 10:54

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

PlatformLocation.location returns a wrong information, e.g. for "localhost:20623/welcome" returns the same string instead of the base url "localhost:20623". In my answer I could reolve the correct base url, but not directly with angular 2 component.
Seems it's platformLocation.origin, not platformLocation.location
what about hash # urls ?
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).
Downvoting this. Because, from the Angular docs for PlatformLocation: > This class should not be used directly by an application developer. Instead, use Location.
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');
}
Improve this answer

2 Comments

@vinagreti's answer should be accepted as it does not rely on window.location, and is therefore testable
This answer is only one which works when we use # (hash) in angular url's +1
3 
import { Router } from '@angular/router';

[...]

constructor(private router: Router) { 
  let absoluteUrl = window.location.origin + this.router.createUrlTree(['/products']);
}
Improve this answer

4 Comments

you should add more details
you might consider window.location.origin or window.origin. Please see stackoverflow.com/questions/55451493/what-is-window-origin
not works when you have routes whith hash # (e.g https//mysite.com/#/users)
This doesn't work when you go from a base url such as sharedserver.com/my-app/login and the angular url is just /login, it will return sharedserver.com/login

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.