passing multiple params in route angular 4 : <p>Hello I want to pass some params with routing in angular 4</p>

<p>app-routing.module.ts</p>

<pre><code>import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { StartGameComponent } from './start-game/start-game.component';
import { GameComponent } from './game/game.component';


const appRoutes: Routes = [
  { path: '', redirectTo: '/first', pathMatch: 'full' },
  { path: 'startGame', component: StartGameComponent },
  {path: 'game/:width/:height',component: GameComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}
</code></pre>

<p>in component <strong>StartGameComponent</strong> </p>

<pre><code>      goToGameComponent(width:string,height:string){
      this.router.navigate(['game', {width:width,height:height}]);
}
</code></pre>

<p>in component <strong>GameComponent</strong></p>

<pre><code> ngOnInit() {
        this.route.params.forEach((urlParams) =&gt; {
          this.width= urlParams['width'];
          this.height=urlParams['height'];

        });
</code></pre>

<p>in app.component.html</p>

<pre><code>&lt;div&gt;
  &lt;md-toolbar color="primary"&gt;
    &lt;span&gt;MineSweeper Wix&lt;/span&gt;

  &lt;/md-toolbar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;

  &lt;span class="done"&gt;
    &lt;button md-fab&gt;
      &lt;md-icon&gt;check circle&lt;/md-icon&gt;
    &lt;/button&gt;
  &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>it's throws my an error</p>

<blockquote>
  <p>Cannot match any routes. URL Segment: 'game;width=10;height=10'</p>
</blockquote>
