Generating the Nested Angular Route path with out the Bindings For Analytics Page view event.

AppComponent.ts

import {Router, NavigationStart, NavigationEnd, NavigationCancel, ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = environment.appName;
  constructor(private _router: Router,
    private route: ActivatedRoute) {
    //Note:: google analytics
    this._router.events.subscribe( (state) => {
      if(state instanceof NavigationEnd){
        
        if(ga){
          ga('send', 'pageview', {
            'page': this.generatePath(this.route.snapshot)
          });
        }
      }
    });
	}


  /**
   This function will generate the full nested path with variables rather than values binded
   Example: users/:user_id/contacts/:contact_id/meetings, 
   generally if ask the activated route URL it will give users/2/contacts/291/meetings
  **/
  private generatePath(route:ActivatedRouteSnapshot){
    let paths = [];
    let childRoute = route;
    let stopWhile = false;
    while(!stopWhile){
      if(childRoute.children.length){
        //Note:: We need to check routeConfig present as well as path is not empty
        if(childRoute.routeConfig && childRoute.routeConfig.path!=""){
          paths.push(childRoute.routeConfig.path);
        }
        childRoute = childRoute.children[0]
      }else{
        stopWhile = true;
      }
    }

    return paths.join("/");

  }
}