RouterLink no funciona

Mi enrutamiento en las aplicaciones de angular2 funciona bien. Pero voy a hacer un routeLink basado en esto :

Aquí está mi ruta:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

Y aquí están los enlaces que hice:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

Supongo que, cuando hago clic en ellos, navega al componente respetado, pero no realizan nada.

El código que está mostrando es absolutamente correcto.

Sospecho que su problema es que no está importando RouterModule (que es donde se declara RouterLink) en el módulo que usa esta plantilla.

Tuve un problema similar y me tomó un tiempo resolverlo, ya que este paso no se menciona en la documentación.

Así que vaya al módulo que declara el componente con esta plantilla y agregue:

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

luego agréguelo a sus importaciones de módulos, por ejemplo

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Además de tener las declaraciones de importación correctas, también necesitará un lugar para que se muestre ese routerLink, que está en el <router-outlet></router-outlet>elemento, por lo que también debe colocarse en algún lugar de su marcado HTML para que el enrutador sepa dónde mostrar esos datos.

no olvide esto para agregar esto a continuación en su plantilla:

<router-outlet></router-outlet>

Intente cambiar los enlaces de la siguiente manera:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Además, agregue lo siguiente en el encabezado de index.html:

<base href="https://stackoverflow.com/">

úsalo así para obtener más información lee este tema

<a [routerLink]="['/about']">About this</a>

Los enlaces están mal, tienes que hacer esto:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

Puedes leer este tutorial

Estaba usando routerlink en lugar de routerLink .

Soy consciente de que esta pregunta ya es bastante antigua, y lo más probable es que ya la haya solucionado, pero me gustaría publicar aquí como referencia para cualquiera que encuentre esta publicación mientras resuelve este problema, es que este tipo de cosas ganó. No funciona si sus etiquetas de anclaje están en Index.html. Debe estar en uno de los componentes.

Para cualquiera que tenga este error después de dividir los módulos, verifique sus rutas, me sucedió lo siguiente:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Muévase { path: '**', redirectTo: 'home' }a su AppRoutingModule:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

También hay otro caso que se adapta a esta situación. Si en su interceptor, hizo que devolviera un valor no booleano, el resultado final es así.

Por ejemplo, había intentado devolver obj && obj[key]cosas. Después de depurar por un tiempo, me doy cuenta de que tengo que convertir esto al tipo booleano manualmente Boolean(obj && obj[key])para dejar pasar el clic.

Siguiendo la muestra de trabajo , he descubierto una solución para el caso del componente puro:

1. Declarar componente a nivel de aplicación
2. No inicie en componente

Para ojos no muy agudos como los míos, en hreflugar de routerLink, me tomó algunas búsquedas para descubrir eso #facepalm.