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

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.

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

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

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.

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";
  }
}