为Angluar SPA的应用程序实施路线

Question

我想实现我的routing配置，并在基本的SPA应用中确保Angular方面！但是问题是我的components没有创建，我的目的是在我的routing中创建带有链接的SideNav而不创建特定的components！因此，我保证了routing，但是navigation从链接到链接的链接没有嵌入SPA的东西；因此SPA方面不可用！

app-routing.module.ts

import { NgModule } from '@angular/core';


@NgModule({        // routes has the route configuration. 
    // It is a variable of type Routes
      imports: [RouterModule.forRoot(routes)],  /* there is some error here  routes isnt defined ,I knew 
                                                   I have should have implemented paths and components 
                                                   but like I clarified above there is a component 
                                                   parameter for forRoot() method  . In my case I had no 
                                                   components I have only links */
      exports: [RouterModule]
    })

    export class AppRoutingModule { 
    }

main-nav.component.html

  <mat-sidenav 
  #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="City1">City 1</a>  <!-- link1 whom I want to apply SPA aspect -->
      <a mat-list-item href="City2">City 2</a>  <!-- link2 whom I want to apply SPA aspect -->
      <a mat-list-item href="City3">City 3</a>  <!-- link3 whom I want to apply SPA aspect -->
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>City-routing</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>