How to redirect to an external URL in Angular2?
RedirectAngularAngular2 RoutingRedirect Problem Overview
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?
Redirect Solutions
Solution 1 - Redirect
You can use this-> window.location.href = '...';
This would change the page to whatever you want..
Solution 2 - Redirect
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
Check out the platformBrowser repo for more info.
Solution 3 - Redirect
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>
Solution 4 - Redirect
I think you need à target="_blank", so then you can use window.open
:
gotoGoogle() : void {
window.open("https://www.google.com", "_blank");
}
Solution 5 - Redirect
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.
Solution 6 - Redirect
in newer versions of Angular with window as an any
(window as any).open(someUrl, "_blank");
Solution 7 - Redirect
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');
Solution 8 - Redirect
After ripping my head off, the solution is just to add http:// to href.
<a href="http://www.URL.com">Go somewhere</a>
Solution 9 - Redirect
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');
}
}
Solution 10 - Redirect
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';
}
Solution 11 - Redirect
There are 2 options:
-
if you want to redirect in same window/tab
gotoExternalDomain(){ window.location.href='http://google.com/' }
-
if you want to redirect in new tab
gotoExternalDomain(){ (window as any).open("http://google.com/", "_blank"); }
Solution 12 - Redirect
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");
Solution 13 - Redirect
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;**
Solution 14 - Redirect
Just simple as this
window.location.href='http://www.google.com/';