找不到角度2中的链接路径

Question

Why is it that I cannot view the page when I type in " http://localhost:4200/values " and I get this error: "Error: Cannot match any routes. URL Segment: 'values'"

This is how my code goes.

app.routing.ts

export const AppRoutes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: '',
        redirectTo: '/starter',
        pathMatch: 'full'
      },
      {
        path: '',
        loadChildren:
          './material-component/material.module#MaterialComponentsModule'
      },
      {
        path: 'starter',
        loadChildren: './starter/starter.module#StarterModule'
      },
      {
        path: 'component',
        loadChildren: './components/component.module#ComponentModule'
      }
    ]
  }
];

component.module.ts

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(ComponentRoutes),
        DemoMaterialModule
    ],
    declarations: [
        ValuesComponent,
        LoginComponent
    ]
})
export class ComponentModule {}

component.routing.ts

export const ComponentRoutes: Routes = [
    // {
    //     path: '',
    //     component: ValuesComponent
    // },
    {
        path: 'values',
        component: ValuesComponent
    },
    {
        path: 'login',
        component: LoginComponent
    }
];

and this is how I call it from the link

const MENUITEMS = [
  { state: 'starter', name: 'Starter Page', type: 'link', icon: 'av_timer' },
  { state: 'button', type: 'link', name: 'Buttons', icon: 'crop_7_5' },
  { state: 'values', type: 'link', name: 'Values Page', icon: 'assistant' },
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

html for the links

<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuitem()" routerLinkActive="selected" group="{{menuitem.state}}">
        <a class="" appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
            <mat-icon>{{ menuitem.icon }}</mat-icon> 
            <span>{{ menuitem.name }}</span> 
            <span fxFlex></span> 
            <span class="label label-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span> 
        </a>


    </mat-list-item>

Can you please show me how to do this right? Thank you so much for your help.

Answer 1

On localhost:4200/component you are loading ComponentModule. Once that module is loaded it will open find the path: '' and will load the component associated with that path in this case ValuesComponent. you have the path: 'values' for ValuesComponent as well.

So as per your structure, there are no routes with localhost:4200/values , if you need to open ValuesComponent you need to load localhost:4200/component or localhost:4200/component/values

Hope this helps. All the best!