Redirect to URL outside the Angular app but on the same domain

Question

Within angular routing is there any way to redirect to an external directory on the same domain. I have a WordPress blog and angular app I want it to use same domain rather than a subdomain.

Example

http://example.com --> Angular App
http://example.com/blog --> Wordpress Blog

Please help me with your suggestions.

2 solutions come to my mind, you could either put the blog in a iframe, or let the server redirect the url to the blog instead of the angular file.. — Ploppy, Sep 11 '18 at 08:16
Possible douplicate of https://stackoverflow.com/questions/40150393/how-to-redirect-to-an-external-url-from-angular2-route-without-using-component/40395382 — Jacopo Sciampi, Sep 11 '18 at 08:17
Thanks, @Ploppy, I already aware of those solutions, but I want something else — Kesara Wimal, Sep 11 '18 at 08:19
thanks, @Denisx, your solution will work with an external URL but not with URL in the same domain — Kesara Wimal, Sep 11 '18 at 08:21
@JacopoSciampi This is not a duplication I ask something else — Kesara Wimal, Sep 11 '18 at 08:22
@KesaraWimal look the comments, angular's router navigate just into your domain, so if, for example, you have an angular app running in the port 3000 and a blog running on a port 3500, you can't use router — Jacopo Sciampi, Sep 11 '18 at 08:41
@JacopoSciampi can you please explain it more, how to redirect to internal URL rather than an external URL — Kesara Wimal, Sep 11 '18 at 10:12
@KesaraWimal like @Denisx said, `window.location.href = 'your_url';` — Jacopo Sciampi, Sep 11 '18 at 10:16
@JacopoSciampi that is working with external URL, not with internal ones — Kesara Wimal, Sep 11 '18 at 10:34
I am also facing this difficulty, window.location.href does not work when redirecting on the same domain. Please advise? — Furqan Safdar, Apr 28 '19 at 19:12
Digging this up because I'm also facing the same problem. Seems to be unsolved even on Angular's github: https://github.com/angular/angular/issues/15015 — VolatileRig, Jul 13 '20 at 21:21
@VolatileRig: What error do you get with `window.location.href = 'https://....'`? — David, Jul 14 '20 at 07:37
try window.location.href = 'your URL'; location.reload(true); — saumil_, Jul 15 '20 at 07:49
@KesaraWimal Ports are used in development modes, not production! — Amirhossein Mehrvarzi, Jul 16 '20 at 14:26

score 7 · Answer 1 · answered Jul 16 '20 at 15:28

7

I understand why you wanna do this with Angular router. Navigating to an external url from an Angular application is something quite easy. Using window.location or an anchor tag is straight forward, but it has a big disadvantage, it bypasses the Angular Router.

@Adrian proposed a nice and generic way of navigating to an external url using the Angular Router which is written inside Using the Angular Router to navigate to external links. I like his implementation which looks clean and correct. He prepared the final result in stackblitz too.

answered Jul 16 '20 at 15:28

Amirhossein Mehrvarzi

18,024
7
45
70

I haven't had a chance to actually try this impl, but I feel like this is the most "correct" way to implement it because it doesn't bypass the Router. Actually, I hadn't considered the route guards at all, but now that I have, there's no doubt that I want to continue using the router. :) – VolatileRig Jul 20 '20 at 16:02

score 2 · Answer 2 · answered Jul 16 '20 at 16:17

If understood correctly, it should work with redirection based on content type.

Solution:

Redirects (301, 302, 303, 307) to internal/external page or file, based on domain and path:

Github - TYPO3.UrlForwarding
See - Full documentation

Other option is to use DNS redirects at redirect.center as an example.

Last and final, to use WordPress plugin which at first look seems to have many options to try out.

More at - https://redirection.me

score 1 · Answer 3 · answered Jul 15 '20 at 08:50

1

You can simply use window.open(url, '_blank'); it will open new tab with url that set in to it

answered Jul 15 '20 at 08:50

CodeMind

616
1
7
19

score 1 · Answer 4 · answered Jul 18 '20 at 03:34

The angular router is meant to provide the routes within the angular app and has no inherent external routing.

You could route to an almost empty component that redirects to your external link. That seems to be the simplest solution.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from './blog/blog.component';    

const routes: Routes = [
  { path: 'blog', component: BlogComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

blog.component.ts

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

@Component({
  template: ''
})
export class BlogComponent implements OnInit {
  ngOnInit(): void {
    window.location.href = 'http://example.com/blog';
  }
}

PS: Ensure you can access your wordpress installation without being redirected to the angular app by your server.

@pavinan It's been tagged as both. Which seems kinda weird, since they are mutually exclusive tags. That said I am not familiar with `angularjs`. So maybe someone who does can use this answer as inspiration or point out any similarities. — Rob Monhemius, Jul 18 '20 at 04:40

score 1 · Answer 5 · answered Jul 18 '20 at 04:27

I think you can use redirect to function like the following code sample.

$routeProvider.when("/blog", {
  redirectTo: function () {
    window.location.href = window.location.origin + "/blog";
    // remove below line if it is not working.
    return "/some redirecting animation page";
  }
});

if using state provider.

var aboutState = {
  name: 'blog',
  url: '/blog',
  redirectTo: function () {
    window.location.href = window.location.origin + "/blog";
    // remove below line if it is not working.
    return "/some redirecting animation page";
  }
}

Redirect to URL outside the Angular app but on the same domain

5 Answers5

Linked