typescript - routerLink nu funcționează în Angular

Învăț Angular JS folosind TypeScript. Am experiență în Angular JS. Dar când este integrat cu TypeScript, este complet nou pentru mine. Acum configurez ruta pentru aplicația mea.

This is my app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';
//import { AppRoutingModule }  from './app-routing.module';



import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [
{
  path: '',
  component: HomeComponent
},
{
  path : 'directory',
  component : DirectoryComponent
}
];



@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  DirectoryComponent,

  ],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routes)
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Am configurat ruta în acel fișier. Când accesez rutele direct din browser, funcționează. Apoi am încercat să adaug linkuri în app.component.html. Acesta este app.component.html-ul meu

<h1>
  {{title}}
</h1>

<div>
    <ul>
        <li>
            <a [routerLink]="['/']">Home</a>
        </li>
        <li>
            <a [routerLink]="['directory']">Directory</a>
        </li>
    </ul>
</div>

<div>
    <router-outlet></router-outlet> 
</div>

Apoi dau clic pe linkuri. Ambele nu funcționează deloc. Dar când accesez direct introducând valorile rutei în bara URL, funcționa. HomeComponent-ul și DirectoryComponent-ul meu sunt simple. Ele doar afișează un mesaj.

Funcționează când accesez pentru prima dată url-ul ‘/directory’. Afișează pagina directorului. De acolo, când dau clic pe link-ul către pagina principală, se actualizează la pagina principală. Dar url-ul este încă ‘directory’. Dar când dau clic din nou pe link-ul directorului, nu se întâmplă nimic.

Am urmat aceste soluții

routerLink nu funcționează în Angular 2

routerlink nu funcționează în angular2

RouterLink nu funcționează

Nu toate funcționează.

Am inspectat elementele HTML, linkul se afișează corespunzător. Problema apare atunci când dau clic pe link, nu se întâmplă nimic.

Folosesc cea mai recentă versiune a Angular JS. Ce este în neregulă cu codul meu?

Răspuns #1

Este din cauza schimbării directorului home; modifică routerlink-ul într-un alt nume și îți va rezolva problema.

în loc de '' folosește câteva nume

Răspuns #2

Am avut aceeași problemă și se pare că rutele nu vor face nimic dacă ruta nu există. Eu am avut

<nav>
    <a routerLink="/review" >Full reviews</a>
</nav>

Dar ruta mea a fost setată la review (fără s)
Sper că acest lucru ajută pe altcineva