How to Route to External Link in Angular 5

Question

This might be a dumb question but I am new to Angular and haven't gotten an answer for this.

I was following a tutorial and have my routes set up like this for my Angular 5 project:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageComponent } from './page/page.component';

const appRoutes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: PageComponent, data: {
    page: 'home'
  }},
  {path: 'about', component: PageComponent, data: {
    page: 'about'
  }},
  {path: 'contact', component: PageComponent, data: {
    page: 'contact'
  }},
  {path: 'facebook', component: PageComponent, data: {
    page: 'facebook'
  }},
  {path: '**', redirectTo: '/home', pathMatch: 'full'}
];

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

Let's say I want to route the "facebook" path to my facebook page. I am not sure how to route to pages outside of the Angular Application.

Any help would be appreciated!

Answer 1

@Rafael Has left the correct answer as a comment.

You would just create a link tag pointing to facebook

<a href="www.facebook.com/yourpage">Facebook</a>

The routes that you are setting up are all for local paths. In other words, all of those routes are for what is displayed on www.yoursite.com/route1, and what is displayed on www.yoursite.com/route2.

But notice that they will all have yoursite.com for the domain.

If you want to create a link to a site outside of your domain, then you do not want to mess with the angular routing, but instead create a link.

So what you're really asking is how can you show www.facebook.com's page on www.yourpage.com/facebook, which is not really possible.

Without an iframe you cannot display a different website within your own site, even with a route.

If that is really what you're trying to do, then you might want to look into iframes.

Answer 2

Just use a regular anchor href.

<a href="http://facebook.com">Add Vehicle</a>

or for javascript:

window.location.href = 'http://facebook.com';