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

User · Answer

I think you need    target   blank   so then you can use window open    gotoGoogle     void        window open  https   www google com     blank

User · Answer

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

User · Answer

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   lt button type  button   click   goToSpecificUrl  http   stackoverflow com     gt Open URL lt  button gt   lt button type  button   click   gotoGoogle    gt Open Google lt  button gt    lt li  ngFor  item of itemList   click   goToSpecificUrl item link   gt      click  don t enable pointer when we hover so we should enable it by using css like    cursor  pointer

User · Answer

in newer versions of Angular with window as an any   window as any  open someUrl    blank

User · Answer

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

User · Answer

You can use this-  window location href            This would change the page to whatever you want

User · Answer

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

User · Answer

An Angular approach to the methods previously described is to import DOCUMENT from  angular common  or  angular platform-browser in Angular    lt  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   lt button type  button   click   goToUrl    gt Click me  lt  button gt    Check out the plateformBrowser repo for more info

User · Answer

After ripping my head off  the solution is just to add http    to href    lt a href  http   www URL com  gt Go somewhere lt  a gt

User · Answer

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    lt button  click   goCNN    gt Go to CNN lt  button gt

User · Answer

Just simple as this window location href  http   www google com

User · Answer

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  gt  window location href    http   www cnn com         Basically routing to any  dummy  route to force the hook  and then navigate as requested

User · Answer

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

[redirect] How to redirect to an external URL in Angular2?

Examples related to redirect

Examples related to angular

Examples related to angular2-routing