Can I use Angular routing with a parameterized component constructor, and if so, how?

Question

I am trying to incorporate angular's routing module into an existing Angular project. I have three components that are each linked to a path in my Routes object in app.module.ts.

const appRoutes: Routes  = [
  { path: 'home', component: HomeComponent  },
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'spe', component: StoryPointEstimatorComponent },
  { path: 'tse', component: TShirtEstimatorComponent }
];

Each component gets displayed once the user clicks its corresponding link in the header component that is anchored to the top of the window:

<div class="container-fluid">
  <div class="row">
    <div class="navbar-default">
      <ul class="nav navbar-nav">
        <li><a routerLink="/">Home</a></li>
        <li><a [routerLink]="['/', 'spe']">Story Pointing</a></li>
        <li><a [routerLink]="['/', 'tse']">T-Shirt Sizing</a></li>
      </ul>
    </div>
  </div>
  [...]
  <router-outlet></router-outlet>
</div>

Finally, the StoryPointEstimator and TshirtEstimator components are each made of three panels (that is, subcomponents) that are spread across the browser window: a left panel takes in the input, the middle one displays a numerical scale, and the right panel displays the output.

My problem occurs with the TS file of the left panel of StoryPointEstimatorComponent: called sp-input. I wish to add parameters to this subcomponent's constructor to perform some rudimentary functions with it when the user navigates to the StoryPointEstimatorComponent; however, when I do so, the browser can no longer access the path [domain]/spe.

This problem occurs whenever I try to either append the parent's path to the URL or when I try to select its link from the header. Instead, the path is never displayed in the URL or it will keep the path of the previous component it accessed. Meanwhile, the component itself never shows up on the page.

Below are my app settings:

Angular CLI: 13.3.0       
Node: 14.15.4
Package Manager: npm 8.6.0
OS: win32 x64

Angular: 13.3.0
... animations, cli, common, compiler, compiler-cli, core, forms

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.0
@angular-devkit/build-angular   13.3.0
@angular-devkit/core            13.3.0
@angular-devkit/schematics      13.3.0
@schematics/angular             13.3.0
rxjs                            7.5.5
typescript                      4.6.2

The console error I get is as follows: enter image description here

Here is the code containing the import statement and constructor code:

import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Category } from 'src/app/models/category/category.model';
import { Complexity } from 'src/app/models/complexity/complexity.model';
import { Effort } from 'src/app/models/effort/effort.model';
import { Estimate } from 'src/app/models/estimate/estimate.model';
import { FibSeq } from 'src/app/models/fibseq/fibseq.model';
import { Name } from 'src/app/models/name/name.model';
import { Task } from 'src/app/models/task/task.model';
import { TaskRepository } from 'src/app/models/tasks.repository/tasks.repository.model';

import jspdf from 'jspdf';
import html2canvas from "html2canvas";
import Swal from "sweetalert2";
import { FormGroup, FormControl } from '@angular/forms'

@Component({
  selector: 'app-sp-input',
  templateUrl: './sp-input.component.html',
  styleUrls: ['./sp-input.component.css']
})
export class SpInputComponent implements OnInit {

  public story: string;
  public storyPoints: number;
  public selCategory: number;
  public selName: number;
  public selEffort: number;
  public selComplexity: number;
  public selTshirt: number;
  public taskNote: string;
  public pointingDate: string;
  public tshirtPointingDate: string;
  public isHidden: boolean;
  public recordNotFoundHidden: boolean;
  public tshirtRecordNotFoundHidden: boolean;
  public parent: string;
  // public datepipe: DatePipe;
  public inputForm: FormGroup;

  private task: Task = new Task();
  private taskList: Task[];
  private category: Category;
  private name: Name;
  private effort: Effort;
  private complexity: Complexity;
  private taskPointValue: number;
  private note: string;
  private date: Date;

  private dependency: string;
  private storyEstimate: Estimate = new Estimate();
  private fibonacciRangeList: number[][] = [
    [200, 70, 100],
    [70, 30, 40],
    [30, 16.5, 20],
    [16.5, 10.5, 13],
    [10.5, 6.5, 8],
    [6.5, 4, 5],
    [4, 2.5, 3],
    [2.5, 1.5, 2],
    [1.5, 0.75, 1],
    [0.75, 0, 0.5]];   // [high range, low range, rounded value]

  private taskArray: Task[] = [];

  constructor(private repository: TaskRepository, public datepipe: DatePipe) {
    this.date = new Date();
    this.pointingDate = this.datepipe.transform(this.date, 'MM-dd-yyyy');
    this.isHidden = true;
    this.recordNotFoundHidden = true;
    this.tshirtRecordNotFoundHidden = true;
}

  ngOnInit(): void {

  }
[...]
}

Update: I have removed the TaskRepository as a class and replaced it with an angular service, `ToolboxService', using Angular's CLI and I am still getting the same error. One click to the router link yields a NullInjectorError, and a return to the link from another component yields the following:

Error: NG0200: Circular dependency in DI detected for ToolboxRepositoryService

Here is an updated screenshot of the console. enter image description here