Why is the navigation between questions in my quiz app not working?

Question

I am having difficulty with getting the navigation between questions working, please see: https://stackblitz.com/edit/angular-9-quiz-app. 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:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'question/2'

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!

In di-quiz template:

<button type="button" (click)="nextQuestion()">
  Next &raquo;
</button>

call to next question in the service:

nextQuestion() {
  this.quizService.nextQuestion();
}

in quiz.service.ts:

constructor(
  private timerService: TimerService,
  private router: Router,
  private route: ActivatedRoute) {
    /* this.route.paramMap.subscribe(params => {
      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]);
}

in quiz-routing.module.ts:

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 {}

and my data object (in quiz.ts) looks like:

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'
    },
  ...
  ]
};

Answer 1

There is lot of problems with the code I saw. There are lot of @Output and @Input being used. But most of them irrelevant. I have tried to change most of the issues, but still there are few of the things that are still pending. Please have a look at the repo:

https://github.com/anooprvarrier/Quiz-example

I had upgraded all the dependency to latest version.