Unable to get the path nor url from angular router

Question

I am unable to get the URL nor the path from ActivatedRoute nor Router imports. It outputs a blank for path "" and '/' for URL. I remember using a working version. The only thing that captures the right route the Router.events. I am also unable to subscribe to the URL in the ActivatedRoute. Here is the code

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'api-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  routePath: string = '';

  constructor(
    private _r: Router,
    private _ar: ActivatedRoute) {
    this._r.events.subscribe((event: any) => {
      if (event instanceof RoutesRecognized) {
          // '/teams' output with route http://localhost:4200/teams
        console.log(event.url);
      }
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    });

  }


  ngOnInit() {
    console.log(this._ar.pathFromRoot.toString()); // Blank output with route http://localhost:4200/teams
    console.log(this._ar.routeConfig.path.toString());  // Blank output with route http://localhost:4200/teams
    console.log(this._ar.snapshot.url);  // Blank output with route http://localhost:4200/teams
    this._ar.url.subscribe((urlsegment: UrlSegment[]) =>{
      console.log(urlsegment) // Unable to subscribe with route change to /teams
    })
  }

}

Anything I am missing here? I have seen this Angular router url returns slash

My routes:

const APPMainRoutes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'teams', component: CollaborateComponent},
    {path: 'login', component: LoginComponent},
];

My ng versions:

Angular CLI: 6.1.4 Node: 10.7.0 OS: linux x64 Angular: 6.1.4 ... animations, cli, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.4 @angular-devkit/build-angular 0.7.4 @angular-devkit/build-optimizer 0.7.4 @angular-devkit/build-webpack 0.7.4 @angular-devkit/core 0.7.4 @angular-devkit/schematics 0.7.4 @angular/cdk 6.4.6 @angular/material 6.4.6 @ngtools/webpack 6.1.4 @schematics/angular 0.7.4 @schematics/update 0.7.4 rxjs 6.2.2 typescript 2.7.2 webpack 4.9.2

Answer 1

You can get url info like this :

ngOnInit() {
    console.log(this._r.url);
  }

And if you need to get queryParams in the url You can get :

this._r.snapshot.queryParamMap

Answer 2

You can check instanceof NavigationStart and NavigationEnd

here's is the example

in app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

export class AppComponent {

  constructor(private router: Router) { }

  ngOnInit() {

    this.router.events.subscribe((event: any) => {
      if(event instanceof NavigationStart) {
        console.log('start => ',event.url);
      }
      if(event instanceof NavigationEnd) {
        console.log('end => ',event.url);
      }
    });
  }
}

Stackblitz demo

Answer 3

The component where I was trying to access the url or the path was the host/parent/parallel component to the component tree. All the above failures allowed capture of right path inside the route components but not the parent/host/paralleltree component. Only Router.events work there. Surprisingly I was unable to capture and make work the ActivatedRoute.url.subscribe as well inside the parent/host.

<app-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<router-outlet>
<team-cmp>Router and ActivatedRoute Works here</team-cmp>
</router-outlet>
<sidebar-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<sidebar-cmp>
</app-cmp>

This works in host/parent/parallel tree - or :

// inject in constructor
constructor( private _router: Router) {

// Call below anywhere within Init or Constructor etc
this._router.events.subscribe((event: any) => {
      if (event instanceof RoutesRecognized) {
        console.log(event.url); // WORKS
      }
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    });

}

Answer 4

If all else fails you can use location.pathname which is global