Angular Routing Path not showing Component

Question

I have this app.routes.ts and I am trying to set my EditconfigComponent for the path config but if I load it up the component is not there.

import { Routes } from '@angular/router';
import {OverviewComponent} from "./components/overview/overview.component";
import {ArtifactComponent} from "./components/artifact/artifact.component";
import {RepositoryComponent} from "./components/repository/repository.component";
import {VersionComponent} from "./components/version/version.component";
import {VariablesComponent} from "./components/variables/variables.component";
import {EditconfigComponent} from "./components/editconfig/editconfig.component";


export const appRoutes: Routes = [
  { path: '', component: OverviewComponent, pathMatch: 'full' },
  { path: ':app', component: RepositoryComponent },
  { path: ':app/:repo', component: VersionComponent },
  { path: ':app/:repo/var', component: VariablesComponent},
  { path: ':app/:repo/:version', component: ArtifactComponent },
  { path: 'config', component: EditconfigComponent}
];

I did set the EditconfigComponent to the path: '' and it worked but not with the config path

Answer 1

I think it is a matter of consistency this should work

export const appRoutes: Routes = [
  { path: '', component: OverviewComponent, pathMatch: 'full' },
  { path: 'config', component: EditconfigComponent }, // this bit should be changed.
  { path: ':app', component: RepositoryComponent },
  { path: ':app/:repo', component: VersionComponent },
  { path: ':app/:repo/var', component: VariablesComponent},
  { path: ':app/:repo/:version', component: ArtifactComponent },
  { path: '**', redirectTo: '' }  // Handle undefined routes by redirecting to the home page
];