CODEWITHSUNDEEP
angularangular5
Orion
Orion

Reputation: 144

How to Route to External Link in Angular 5

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!

Upvotes: 8

Views: 38891

Answers (4)

YassineDER
YassineDER

Reputation: 1

I may be a bit late but my answer could help anyone having the same issue.

Just add "https://" at the beginning of the url and it should be fine.

Example:

<a href="https://www.external_website.com" target="_blank"> Website </a>

Upvotes: 0

Bryan Lim
Bryan Lim

Reputation: 601

For anyone who are looking for a solution on how to implement the solution mention above using TypeScript here is an example below

const link = document.createElement('a');
link.href = 'http://facebook.com/'
link.target = '_blank';
link.click()

And if you are finding on how to download from external link just add

link.download = 'download';

Upvotes: 1

Matt
Matt

Reputation: 2290

Just use a regular anchor href.

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

or for javascript:

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

Upvotes: 10

JBoothUA
JBoothUA

Reputation: 3149

@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.

Upvotes: 21

Related Questions