title: Why is the navigation between questions in my quiz app not working?
body: <p>I am having difficulty with getting the navigation between questions working, please see: <strong><a href="https://stackblitz.com/edit/angular-9-quiz-app" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9-quiz-app</a></strong>. When clicking on the next button, the questionID gets incremented by 1 and then switches back to 1 and does not navigate to the next question. I am getting this error message in Chrome Dev Tools:</p>
  
  <p>Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'question/2'</p>
  
  <p>Not sure what I'm missing. It should work without using id, using the index of the quizData instead. Please could you help. Thank you!</p>
  
  <p>In di-quiz template:</p>
  
  <pre><code>&lt;button type="button" (click)="nextQuestion()"&gt;
    Next &amp;raquo;
  &lt;/button&gt;
  </code></pre>
  
  <p>call to next question in the service:</p>
  
  <pre><code>nextQuestion() {
    this.quizService.nextQuestion();
  }
  </code></pre>
  
  <p>in <strong>quiz.service.ts</strong>:</p>
  
  <pre><code>constructor(
    private timerService: TimerService,
    private router: Router,
    private route: ActivatedRoute) {
      /* this.route.paramMap.subscribe(params =&gt; {
        this.setQuestionIndex(+params.get('questionText'));
        this.question = this.getQuestion;
      }); */
  }
  
  nextQuestion() {
    this.questionID++;
    this.navigateToNextQuestion();
    this.timerService.resetTimer();
    this.increaseProgressValue();
  }
  
  navigateToNextQuestion() {
    this.router.navigate(['/question', this.questionID]);
  }
  </code></pre>
  
  <p>in <strong>quiz-routing.module.ts</strong>:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { IntroductionComponent } from './containers/introduction/introduction.component';
  import { DependencyInjectionQuizComponent } from './containers/dependency-injection-quiz/dependency-injection-quiz.component';
  import { ResultsComponent } from './containers/results/results.component';
  
  const routes: Routes = [
    { path: '', redirectTo: 'intro' },
    { path: 'intro', component: IntroductionComponent },
    { path: 'question', component: DependencyInjectionQuizComponent },
    { path: 'question/:questionID', component: DependencyInjectionQuizComponent },
    { path: 'results', component: ResultsComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class QuizRoutingModule {}
  </code></pre>
  
  <p>and my data object (in <strong>quiz.ts</strong>) looks like:</p>
  
  <pre><code>export const QUIZ_DATA: Quiz = {
    milestone: 'Dependency Injection Quiz',
    summary: "Dependency Injection is extremely powerful because it is a way of providing dependencies in your code instead of hard-coding them.",
    imageUrl: 'assets/images/DIDiagram.png',
    questions: [
      {
        questionText: 'What is the objective of dependency injection?',
        options: [
          { text: 'Pass the service to the client.', correct: true },
          { text: 'Allow the client to find service.', correct: true },
          { text: 'Allow the client to build service.' },
          { text: 'Give the client part service.' }
        ],
        explanation: 'a service gets passed to the client during DI'
      },
    ...
    ]
  };
  </code></pre>