How to navigate to external URL without Angular prepending "localhost:xxxx"?

Question

I'm trying to write a guard that, if the user is not logged in, redirects to an external service (say, Instagram),

if (!loggedIn) {
   this.location.go(this.instagramLoginUri);
}

where location is an instance of Angular's Location and the URI is

https://api.instagram.com/oauth/authorize/?client_id=xxxxx&redirect_uri=xxxxx&response_type=token

When this guard triggers, Angular tries to navigate to

http://localhost:4200/https://api.instagram.com/oauth/authorize/?client_id=xxxxx&redirect_uri=xxxxx&response_type=token

which fails, of course. I tried using

window.location.href = 'xxxxx'

as well, with the exact same result, so I'm not sure this is indeed Angular related. Any pointers?

Answer 1

Could you please try this:

 constructor(@Inject(DOCUMENT) private document: any) { }

 if (!loggedIn) {
    this.document.location.href = 'http://instagram.com';
 }