CODEWITHSUNDEEP
angular
Kesara Wimal
Kesara Wimal

Reputation: 729

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

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

Please help me with your suggestions.

Upvotes: 11

Views: 10664

Answers (5)

pavinan
pavinan

Reputation: 1361

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

Upvotes: 1

Rob Monhemius
Rob Monhemius

Reputation: 5144

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.

Upvotes: 1

Sall
Sall

Reputation: 31

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:

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.

Upvotes: 2

Amirhossein Mehrvarzi
Amirhossein Mehrvarzi

Reputation: 18954

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.

Upvotes: 7

CodeMind
CodeMind

Reputation: 646

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

Upvotes: 1

Related Questions