RouterLink não funciona

Meu roteamento nos aplicativos angular2 funciona bem. Mas vou fazer algum routeLink com base nisso :

Aqui está minha rota:

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

E aqui estão os links que fiz:

<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>

Espero que, quando clico neles, navegue até o componente respeitado, mas eles não realizam nada?

O código que você está mostrando está absolutamente correto.

Eu suspeito que o seu problema é que você não está importando RouterModule (que é onde RouterLink é declarado) para o módulo que usa este modelo.

Tive um problema semelhante e demorei algum tempo a resolver porque este passo não é mencionado na documentação.

Portanto, vá para o módulo que declara o componente com este modelo e adicione:

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

em seguida, adicione-o às suas importações de módulos, por exemplo

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

Além de ter as instruções de importação corretas, você também precisará de um local para que o routerLink seja mostrado, que é o <router-outlet></router-outlet>elemento, de modo que também precise ser colocado em algum lugar em sua marcação HTML para que o roteador saiba onde exibir esses dados.

não se esqueça disso para adicionar o seguinte em seu modelo:

<router-outlet></router-outlet>

Tente alterar os links conforme abaixo:

  <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>

Além disso, adicione o seguinte no cabeçalho de index.html:

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

use-o assim para obter mais informações, leia este tópico

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

Estou ciente de que esta questão é bastante antiga agora, e provavelmente você já a corrigiu, mas gostaria de postar aqui como referência para quem encontrar esta postagem enquanto soluciona este problema é que esse tipo de coisa venceu não funcionará se suas tags Anchor estiverem em Index.html. Precisa estar em um dos componentes

Os links estão errados, você deve fazer isso:

<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>

Você pode ler este tutorial

Eu estava usando routerlink em vez de routerLink .

Para qualquer pessoa que tenha esse erro depois de dividir os módulos, verifique suas rotas, o seguinte aconteceu comigo:

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 { }

Mova { path: '**', redirectTo: 'home' }para seu 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 { }

Há também outro caso que se adequa a esta situação. Se em seu interceptor, você o fez retornar um valor não booleano, o resultado final é assim.

Por exemplo, tentei devolver obj && obj[key]coisas. Depois de depurar por um tempo, então eu percebi que tenho que converter isso para o tipo booleano manualmente Boolean(obj && obj[key]), para deixar o clique passar.

Seguindo o exemplo de trabalho , descobri a solução para o caso de componente puro:

1. Declarar componente no nível do aplicativo
2. Não inicie no componente

Para olhos não muito penetrantes como os meus, em hrefvez de routerLink, fiz algumas pesquisas para descobrir o #facepalm.