How to redirect to an external URL in Angular2?

Question

What is the method for redirecting the user to a completely external URL in Angular 2. For example, if I need to redirect the user to an OAuth2 server in order to authenticate, how would I do that?

Location.go(), Router.navigate(), and Router.navigateByUrl() are fine for sending the user to another section (route) within the Angular 2 app, but I can't see how they could be used to redirect to an external site?

Answer 1

You can use this-> window.location.href = '...';

This would change the page to whatever you want..

Answer 2

An Angular approach to the methods previously described is to import DOCUMENT from @angular/common (or @angular/platform-browser in Angular < 4) and use

document.location.href = 'https://stackoverflow.com';

inside a function.

some-page.component.ts

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
    this.document.location.href = 'https://stackoverflow.com';
}

some-page.component.html

<button type="button" (click)="goToUrl()">Click me!</button>

Check out the platformBrowser repo for more info.

Answer 3

The solution, as Dennis Smolek said, is dead simple. Set window.location.href to the URL you want to switch to and it just works.

For example, if you had this method in your component's class file (controller):

goCNN() {
    window.location.href='http://www.cnn.com/';
}

Then you could call it quite simply with the appropriate (click) call on a button (or whatever) in your template:

<button (click)="goCNN()">Go to CNN</button>

Answer 4

I think you need à target="_blank", so then you can use window.open :

gotoGoogle() : void {
     window.open("https://www.google.com", "_blank");
}

Answer 5

If you've been using the OnDestry lifecycle hook, you might be interested in using something like this before calling window.location.href=...

    this.router.ngOnDestroy();
    window.location.href = 'http://www.cnn.com/';

that will trigger the OnDestry callback in your component that you might like.

Ohh, and also:

import { Router } from '@angular/router';

is where you find the router.

---EDIT--- Sadly, I might have been wrong in the example above. At least it's not working as exepected in my production code right now - so, until I have time to investigate further, I solve it like this (since my app really need the hook when possible)

this.router.navigate(["/"]).then(result=>{window.location.href = 'http://www.cnn.com/';});

Basically routing to any (dummy) route to force the hook, and then navigate as requested.

Answer 6

in newer versions of Angular with window as an any

(window as any).open(someUrl, "_blank");

Answer 7

There are 2 options:

1. if you want to redirect in same window/tab

    gotoExternalDomain(){
        window.location.href='http://google.com/'
    }
   

2. if you want to redirect in new tab

    gotoExternalDomain(){
        (window as any).open("http://google.com/", "_blank");
    }
   

Answer 8

I did it using Angular 2 Location since I didn't want to manipulate the global window object myself.

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor

It can be done like this:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}

Answer 9

I used window.location.href='http://external-url';

For me the the redirects worked in Chrome, but didn't work in Firefox. The following code resolved my problem:

window.location.assign('http://external-url');

Answer 10

After ripping my head off, the solution is just to add http:// to href.

<a href="http://www.URL.com">Go somewhere</a>

Answer 11

You can redirect with multiple ways:

like

window.location.href = 'redirect_url';

another way Angular document:

import document from angular and the document must be inject as well as bellow otherwise you will get error

import { DOCUMENT  } from '@angular/common';
export class AppComponent {
     constructor(
       @Inject(DOCUMENT) private document: Document
    ) {}
   this.document.location.href = 'redirect_url';
}

Answer 12

None of the above solutions worked for me, I just added

window.location.href = "www.google.com"
event.preventDefault();

This worked for me.

Or try using

window.location.replace("www.google.com");

Answer 13

To use @Inject, you must import it. I didn't see this in any of the answers.

TS file:

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-my-comp.page',
  templateUrl: './my-comp.page.component.html',
  styleUrls: ['./my-comp.page.component.scss']
})
export class MyCompPageComponent {

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

  goToUrl(): void {
    this.document.location.href = 'https://google.com/';
  }

}

HTML file:

<button type="button" (click)="goToUrl()">Google</button>

Answer 14

Most of the current replies are optimal, but for cleaner code I would recomend the use of window instead of an injected reference of document as it is nothing less than a duplicate reference of the window itself. Only case where it better to use is when you cannot directly use the window.

const url : string = "https://stackoverflow.com/questions/34338440/how-to-redirect-to-an-external-url-in-angular2" 
window.open(url, "_blank")
//window.open(url, "_self")
//window.open(url, "_parent")
//window.open(url, "_top")

This code will open a window whose second parameter which is the target atribute that will decide where the URL will be opened.

The specific target atribute values are these: (mozilla)

_self: the current browsing context. (Default)

_blank: usually a new tab, but users can configure browsers to open a new window instead.

_parent: the parent browsing context of the current one. If no parent, behaves as _self.

_top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.

With this you can have a bit cleaner solution on where the new URL should be opened for the best experience of the end user

In any case you can replace router.navigate with

window.open("relativePathFromCurentURL","_self") 

to navigate through your website. I can only recomend you this usage for cases where you do not want to import routing to some components.

Answer 15

In your component.ts

import { Component } from '@angular/core';

@Component({
  ...
})
export class AppComponent {
  ...
  goToSpecificUrl(url): void {
    window.location.href=url;
  }

  gotoGoogle() : void {
    window.location.href='https://www.google.com';
  }
}

In your component.html

<button type="button" (click)="goToSpecificUrl('http://stackoverflow.com/')">Open URL</button>
<button type="button" (click)="gotoGoogle()">Open Google</button>

<li *ngFor="item of itemList" (click)="goToSpecificUrl(item.link)"> // (click) don't enable pointer when we hover so we should enable it by using css like: **cursor: pointer;**