Параметры запроса для корневого компонента в Angular IO

У меня очень простое приложение Angular 4+, которое извлекает данные из API и отображает их. Я считаю, что это возможно при использовании только корневого компонента: {path: 'main', component: MainComponent} и QueryParams, например ?id=1.

Я могу получить параметр запроса, но по какой-то причине мой маршрутизатор повторяет часть URL-адреса route + params после уже существующей части route + params. Например, мой локальный адрес искажается с localhost:4200/main?id=1 на localhost:4200/main?id=1/main?id=1.

ActivatedRoute выбирает правильный параметр запроса из URL-адреса, но я хотел бы, чтобы URL-адрес был как можно более очищенным. Как мне предотвратить это дублирование? Я установил <base href='/'> в соответствии с требованиями маршрутизации в моем index.html.

Модуль:

@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    RouterModule.forRoot(
      [
        { path: 'main', component: MainComponent},
      ]),
    CommonModule,
    HttpModule,
    FormsModule,
    NgbModule.forRoot()
  ],
  declarations: [MainComponent],
  providers: [
    {provide: APP_BASE_HREF, useValue: window.document.location.href},
    DataService,
    WindowService,
    HttpUtil
  ],
  bootstrap: [MainComponent]
})
export class MainModule{}

Составная часть:

@Component({
  selector: 'main-component',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

  constructor(private dataService: DataService,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
      if (!(Object.keys(params).length === 0 && params.constructor === Object)) {
        console.log(params);
      }
    });
  }
}