title: Get current url in Angular
body: <p>How can I get the current url in Angular 4? I've searched the web for it a lot, but am unable to find solution.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule, Router } from '@angular/Router';
  
  import { AppComponent } from './app.component';
  import { TestComponent } from './test/test.component';
  import { OtherComponent } from './other/other.component';
  import { UnitComponent } from './unit/unit.component';
  
  @NgModule ({
    declarations: [
      AppComponent,
      TestComponent,
      OtherComponent,
      UnitComponent
    ],
  
    imports: [
      BrowserModule,
      RouterModule.forRoot([
          {
              path: 'test',
              component: TestComponent
          },
          {
              path: 'unit',
              component: UnitComponent
          },
          {
              path: 'other',
              component: OtherComponent
          }
      ]),
    ],
  
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;!-- The content below is only a placeholder and can be replaced --&gt;
  &lt;div&gt;
      &lt;h1&gt;Welcome to {{title}}!!&lt;/h1&gt;
  
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a routerLink="/test"&gt;Test&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
               &lt;a routerLink="/unit"&gt;Unit&lt;/a&gt;  
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a routerLink="/other"&gt;Other&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component} from '@angular/core';
  
  @Component ({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  
  export class AppComponent{
      title = 'Angular JS 4';
      arr = ['abcd','xyz','pqrs'];
  }
  </code></pre>
  
  <p><strong>other.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Location } from '@angular/common';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-other',
    templateUrl: './other.component.html',
    styleUrls: ['./other.component.css']
  })
  
  export class OtherComponent implements OnInit {
  
      public href: string = "";
      url: string = "asdf";
  
      constructor(private router : Router) {}
  
      ngOnInit() {
          this.href = this.router.url;
          console.log(this.router.url);
      }
  }
  </code></pre>
  
  <p><strong>test.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Location } from '@angular/common';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  
  export class TestComponent implements OnInit {
      route: string;
      currentURL='';
  
      constructor() { 
          this.currentURL = window.location.href; 
      }
  
      ngOnInit() { }
  }
  </code></pre>
  
  <p>Right now I am getting console issue after clicking on <strong>other</strong> link</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: No provider for Router!
  </code></pre>