ExternalRoute
Navigating to an external url from an Angular application using window.location
or an anchor tag is straight forward, but it has a disadvantage, it bypasses the Angular Router.
This means that if we have something like route guards, they will not be called. For example we might have a guard that notifies the user of any unsaved changes and can stop the navigation if the user wishes.
Getting started
npm install @mhlabs/external-route --save
or yarn add @mhlabs/external-route
Setup using default values
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ExternalRouteModule } from '@mhlabs/external-route';
import { AppComponent } from './app.component';
import { ExternalRouteComponent } from './external-route/external-route.component';
import { RouterModule, Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'google',
pathMatch: 'full',
redirectTo:
'/external-route?externalUrl=https://www.google.se&target=_blank'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes), ExternalRouteModule]
})
export class AppModule {}
Configure module
You also have the option to pass a optional configuration object using the .forRoot()
method.
import {
ExternalRouteModule,
ExternalRouteRelationship,
ExternalRouteTarget
} from '@mhlabs/external-route';
ExternalRouteModule.forRoot({
documentRelationship: ExternalRouteRelationship.external,
documentTarget: ExternalRouteTarget.blank,
targetParamKey: 'target',
urlParamKey: 'externalUrl'
})
Configuration
Option | Default | Description |
---|---|---|
documentRelationship |
external | The rel attribute of the external link, read more |
documentTarget |
_self | The target attribute of the external link, read more |
targetParamKey |
target | the name of the query string parameter for target |
urlParamKey |
externalUrl | The name of the query string parameter for url/destination |
Usage
Router
When using the router you have the possibility to pass a externalUrl
and target
to the route /external-route
.
Route to external url from module:
{
path: 'google',
pathMatch: 'full',
redirectTo: '/external-route?externalUrl=https://www.google.se'
}
this.router.navigate([
'/external-route',
{ externalUrl: 'https://google.se', target: '_self' }
]);
Directive
This library also includes a directive that will make all your anchor <a>
tags use the /external-route
path, if:
- The anchor tag don't have the
routerLink
attribute. - The anchor tag has a
href
value.
<a href="https://www.google.com/" target="_self" rel="nofollow">Google</a>