title: Angular 2 - Why do ActivatedRoute.params returns empty Object
body: <p>I am trying to access the <code>:id</code> route parameter in a router guard, but for some reason, it always returns an empty <code>Object{}</code>.</p>
  
  <p>Initially I didn't know how to do this, so I used <a href="https://stackoverflow.com/questions/38488568/get-route-query-params">this question</a> to point me in the right direction, however it yields no result. The key difference between that and this is that my issue is in a <code>guard</code>.</p>
  
  <p>This is my route declaration <code>app-routing.module</code>:</p>
  
  <pre><code>const dashboardRoutes: Routes = [
      {
          path: "dashboard/:id",
          component: dashboard.DashboardComponent,
          canActivate: [guard.LoggedInGuard],
          children: [
              {
                  path: "",
                  redirectTo: "home",
                  pathMatch: "full"
              }, 
              ...
  </code></pre>
  
  <p>And this is my guard <code>existsInDatabase.guard</code> (I tried both <code>params</code> &amp; <code>queryParams</code>):</p>
  
  <pre><code>constructor(
      private router: Router,
      private activatedRoute: ActivatedRoute
  ) { }
  
  
  canActivate() {
      console.log(this.activatedRoute.params);
      this.activatedRoute.params.subscribe(param=&gt; {
          console.log(param); // logs empty Object{}
          console.log(param['id']); // logs undefined
      });
      this.activatedRoute.queryParams.subscribe(param=&gt; {
          console.log(param); // logs empty Object{}
          console.log(param['id']); // logs undefined
      });
      return true;
  }
  </code></pre>
  
  <p>The issue occurs when I try to navigate from </p>
  
  <blockquote>
    <p><code>http://localhost:4200/dashboard/136364285</code></p>
  </blockquote>
  
  <p>to:</p>
  
  <blockquote>
    <p><code>http://localhost:4200/dashboard/136364285/dock/1654321</code></p>
  </blockquote>
  
  <p>How do I get <code>136364285</code>?</p>