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?

score 1 · Accepted Answer · answered Feb 07 '18 at 08:36

1

Could you please try this:

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

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

answered Feb 07 '18 at 08:36

Nour

That actually works - now I'd like to know what the difference between these approaches is. – Thorsten Westheider Feb 07 '18 at 08:44
Location is responsible for normalizing the URL against the application's base href. as Angular website says https://angular.io/api/common/Location. – Nour Feb 07 '18 at 08:51

1 Answers1