title: Angular 2 - How to pass URL parameters?
body: <p>I have created a single page mortgage calculator application in Angular 2, which acts like a learning playground for me (trying to get more accustomed to technology stack currently used at work)... It's running at <a href="http://www.mortgagecalculator123.com">http://www.mortgagecalculator123.com</a> if you want to look at it. I've made it open source with a Fork Me link right on the page if you want to look at it.</p>
  
  <p>Anyhow, what I want to do, is to be able to pass variables to my app, straight from the URL, so they can be consumed by my Angular 2 app. Something like this: <a href="http://www.mortgagecalculator123.com/?var1=ABC&amp;var2=DEF">http://www.mortgagecalculator123.com/?var1=ABC&amp;var2=DEF</a></p>
  
  <p>I've tried following, in my app.component.ts, I've added following:</p>
  
  <pre><code>import { Router, ActivatedRoute, Params } from '@angular/router';
  
  AppComponent {
  private var1: string;
  private var2: string;
  
  constructor(
    private route: ActivatedRoute,
    private router: Router
    ) {}
  
  ngOnInit() {
    this.route.params.forEach((params: Params) =&gt; {
        this.var1 = params['var1'];
        this.var2 = params['var2'];
    });
  
    console.log(this.var1, this.var2);
  }
  ...
  }
  </code></pre>
  
  <p>But this won't work, when I run <strong>npm start</strong>, I get following error:</p>
  
  <p><strong>aot/app/app.component.ngfactory.ts(45,30): error TS2346: Supplied parameters do not match any signature of call target.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Zf0SM.jpg"><img src="https://i.stack.imgur.com/Zf0SM.jpg" alt="enter image description here"></a></p>
  
  <p>Thank you, any help would be much appreciated.</p>