Parse a URL in Angular 2, inspired by https://davidsekar.com/angular/parse-url-in-angular2-.

.Parse a URL in Angular 2

Placeholder for stupid gist naming (https://github.com/isaacs/github/issues/194), find the important parts below.

Angular service.ts

import { Injectable } from '@angular/core';
import * as urlParse from 'url-parse';
import { ParsedUrl } from './url-parser.types';

export * from './url-parser.types';

@Injectable()
export class UrlParserService {
  public parse(url: string): ParsedUrl {
    const baseUrl = {};                              // Ensures that the parsing is independent from the current location of the browser.
    const parseQueryString: boolean = true;
    return urlParse(url, baseUrl, parseQueryString);
  }
}

Parsed URL structure.ts

export interface ParsedUrl {
  protocol: string;
  slashes: boolean;
  auth: string;
  username: string;
  password: string;
  host: string;
  hostname: string;
  port: number;
  pathname: string;
  query: {
    [key: string]: string;
  };
  hash: string;
  href: string;
  origin: string;
  set(key: string, value: string): void;
  toString(): string;
}

Type definition for the imported module.ts

declare module 'url-parse';