title: Angular 2/4 How to get route parameters in app component?
body: <p><a href="https://i.stack.imgur.com/FcBOz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FcBOz.png" alt="enter image description here"></a>As I am new to angular 2/4 I am having trouble setting up a new application as per my need.</p>
  
  <p>I am trying to build an application which will be called for from some another application. Calling application will send some parameter like token, username, application id and etc. </p>
  
  <p>Now, as in Angular 2/4, app.component is our landing component and every first request will go through it. So, I want to get those parameter here in app component and load some user detail, make a local session and the move to other stuff.</p>
  
  <p>problem is when I am trying to access these parameter I am getting anything.</p>
  
  <p>Here is the URL which will start my angular application:
  <a href="http://localhost:86/dashboard?username=admin&amp;token=xyz&amp;appId=8" rel="noreferrer">http://localhost:86/dashboard?username=admin&amp;token=xyz&amp;appId=8</a></p>
  
  <p>Here is my routing file code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const routes: Routes = [
    {
      path: 'dashboard/:username, token', component: AppComponent
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my App Component Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AuthenticationService } from 'app/services/authentication/authentication.service';
  import { User } from 'app/models/user/user';
  import { AppConfig } from 'app/helpers/AppConfig';
  import { ActivatedRoute, Router } from '@angular/router';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    _user: User = new User();
    obj: any;
    error: any;
  
    loginName: string;
    private id: any;
  
    constructor(
      private authenticationService: AuthenticationService,
      private config: AppConfig,
      private route: ActivatedRoute,
      private router: Router
  
    ) { }
  
    ngOnInit() {    
      this.loadCurrentUserDetail();
      this.getParamValues()
  
    }
  
    getParamValues() {
      this.id = this.route.queryParams.subscribe(params =&gt; {      
         this.loginName = params['username']; 
      });
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here params is empty don't know why?</p>
  
  <p>Thanks in advance!</p>
  
  <p>As in image params object has nothing.</p>