[Angular] Problemi con routing

[fermat]

ciao!

ho un problema sul routing in angular che non riesco a capire.
questo il mio app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    DialogBookComponent,
    ConfirmDialogComponent,
    AutoriComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatTableModule,
    MatCardModule,
    MatPaginatorModule,
    MatSortModule,
    MatMenuModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule,
    MatDividerModule,
    MatSelectModule,
    ToastrModule.forRoot({
      positionClass: 'toast-top-center',
      preventDuplicates: true,
    }),
    MatGridListModule,
    RouterModule.forRoot(
      [
        {
          path: '',
          component: AppComponent,
          children: [
            {path: 'autori', component: AutoriComponent},
          ]
        }
      ]
    )
  ],
  providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

poi nella mia topbar ho messo questo:

<a [routerLink]="['/autori']" mat-menu-item>Autori</a>

quando ci clicco vedo che l'url cambia da http://localhost:4200/#/ a http://localhost:4200/#/autori.
ma nella pagina rimane sempre lo stesso contenuto.
secondo voi dove può essere il problema??