title: Angular2: Accessing query parameters from URL giving error
body: <p>Am trying to extract query parameters from the url</p>
  
  <p><code>https://localhost:8080/myapp/shared?id1=2&amp;id2=4</code></p>
  
  <p>I need to use <code>id1</code> and <code>id2</code> values in my <code>app.component.ts</code>. Am trying to use <code>Router, ActivatedRoute, Params from '@angular/router'</code> but when I run the application, the main page is not loaded and I see the following error in browser console:</p>
  
  <pre><code>Error: StaticInjectorError[t]: 
   StaticInjectorError[t]: 
     NullInjectorError: No provider for t!
  Stack trace:
  
  
  LMZF/&lt;/yi&lt;/t.prototype.get@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:293926
  y/&lt;@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237630
  y@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237237
  </code></pre>
  
  <p>And here is what my <code>app.component.ts</code> looks like:</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { HeaderComponent } from './header/header.component';
  import {Router, ActivatedRoute, Params} from '@angular/router'; //added this import statement
  
  @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
    })
  
  export class AppComponent implements OnInit {
  
  constructor(private activatedRoute: ActivatedRoute) {}
  // added following code for query params
  ngOnInit() {
    // subscribe to router event
   this.activatedRoute.params.subscribe((params: Params) =&gt; {
       let userId = params['id1'];
       console.log("parameter is: "+ userId);
      });
  }
  
  
     title = 'My First Angular App';
  }
  </code></pre>
  
  <p>The thing is, i have added <code>Router</code> code which is causing the error without even loading the above url. As I try to run the application without the query param code, it runs fine. </p>
  
  <p>Have tried this solution from <a href="https://stackoverflow.com/a/39146396/1471314">this answer</a>. Have also looked into another <a href="https://stackoverflow.com/questions/36318761/angular2-query-parameter-from-index-url">similar question</a> but it didn't help.</p>
  
  <p>Can someone explains why is that happening?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Have added following import statement in <code>app.module.ts</code>:</p>
  
  <pre><code>imports: [
  BrowserModule,
  HttpModule,
  RouterModule.forRoot([{
              path: '',
              component: AppComponent
          },
  ])
  </code></pre>
  
  <p>Now, this makes application load but still the parameters are not extracted. It is giving following error on browser console:</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shared'
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Adding route path for respective url solves the console error problem but still my parameter is undefined.</p>
  
  <pre><code>RouterModule.forRoot([{
          path: '',
          component: AppComponent
      },
      {
          path: 'shared',
          component: AppComponent
      },
  
  ])
  </code></pre>