Exception Angular2: ne peut pas se lier à 'routerLink' puisqu'il ne s'agit pas d'une propriété native connue

pour les personnes qui trouvent cela en essayant d'exécuter des tests parce que via npm test ou ng test en utilisant le Karma ou n'importe quoi d'autre. Votre. le module spec nécessite un test de routeur spécial pour pouvoir être construit.

import { RouterTestingModule } from '@angular/router/testing';

  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet /

mise en garde lors du codage avec Visual Studio (2013)

j'ai perdu 4 à 5 heures à essayer de corriger cette erreur. J'ai essayé toutes les solutions que j'ai trouvées sur stackoverflow par la lettre et j'ai encore cette erreur: Can't bind to 'routerlink' since it isn't a known native property

soyez conscient, Visual Studio a le mauvais habbit de texte autoformatting quand vous copiez/collez le code. J'ai toujours eu un petit ajustement instantané de VS13 (camel case disparaît).

:

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

devient:

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

C'est une petite différence, mais assez pour déclencher l'erreur. Le plus moche, c'est que cette petite différence évitait mon attention chaque fois que je copiais et collais. Par pur hasard, j'ai vu cette petite différence et je l'ai résolue.

> = V5

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

const appRoutes: Routes = [
  {path:'routing-test', component: RoutingTestComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ]
})

composant:

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

Pour < V5

peut aussi utiliser RouterLink comme directives ie. directives: [RouterLink] . qui a fonctionné pour moi

import {Router, RouteParams, RouterLink} from 'angular2/router';

@Component({
    selector: 'my-app',
    directives: [RouterLink],
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

en général, chaque fois que vous obtenez une erreur comme Can't bind to 'xxx' since it isn't a known native property , la cause la plus probable est d'oublier de spécifier un composant ou une directive (ou une constante qui contient le composant ou la directive) dans le tableau de métadonnées directives . Tel est le cas ici.

puisque vous n'avez pas spécifié RouterLink ou la constante ROUTER_DIRECTIVES - qui contient le suivant :

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
  RouterLinkActive];

<a [routerLink]="['RoutingTest']">Routing Test</a>

il ne connaît pas la directive RouterLink (qui utilise attribut sélecteur routerLink ). Puisque Angular ne sait pas ce qu'est l'élément a , il suppose que [routerLink]="..." est un bien liant pour l'élément a . Mais il découvre ensuite que routerLink n'est pas une propriété indigène des éléments a , donc il jette l'exception sur la propriété inconnue.

Je n'ai jamais vraiment aimé la ambiguïté de la syntaxe . C'est-à-dire: considérer

<something [whatIsThis]="..." ...>

juste en regardant le HTML on ne peut pas dire si whatIsThis est

• un natif de la propriété de something
• sélecteur d'attribut d'une directive
• une entrée de la propriété de something

nous devons savoir quels directives: [...] sont spécifiés dans les métadonnées du composant/directive afin d'interpréter mentalement le HTML. Et quand on oublie de mettre quelque chose dans le tableau directives , je sens que cette ambiguïté le rend un peu plus difficile à déboguer.

vous avez dans votre module

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

vous devez exporter le module RouteModule

exemple:

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

pour pouvoir accéder aux fonctionnalités pour tous ceux qui importent ce module.

dans mon cas j'ai importé le RouterModule dans le module App mais pas importé dans mon module de fonctionnalité. Après avoir importé le module de routeur dans mon EventModule, l'erreur disparaît.

import {NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {EventListComponent} from './EventList.Component';
import {EventThumbnailComponent} from './EventThumbnail.Component';
import { EventService } from './shared/Event.Service'
import {ToastrService} from '../shared/toastr.service';
import {EventDetailsComponent} from './event-details/event.details.component';
import { RouterModule } from "@angular/router";
@NgModule({
  imports:[BrowserModule,RouterModule],
  declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
  exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
   providers: [EventService,ToastrService]
})
export class EventModule {

 }

j'ai essayé toutes les méthodes, qui sont mentionnés ci-dessus.Mais aucune méthode ne fonctionne pour moi.finalement j'ai obtenu la solution pour la question ci-dessus et cela fonctionne pour moi.

j'ai essayé cette méthode:

En Html:

<li><a (click)= "aboutPageLoad()"  routerLinkActive="active">About</a></li>

dans le fichier TS:

aboutPageLoad() { this.router.navigate(['/about']); }

j'apprécie vraiment la réponse de @raykrow quand on a ce problème seulement dans un fichier test! C'est là que j'ai rencontré.

comme il est souvent utile d'avoir une autre façon de faire quelque chose comme une sauvegarde, je voulais mentionner cette technique qui fonctionne aussi (au lieu d'importer RouterTestingModule ):

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
  declarations: [
    MockComponent({
      selector: 'a',
      inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
    }),
    . . .
  ]

(typiquement, on utilise routerLink sur un élément <a> mais on ajuste le sélecteur en conséquence pour les autres composants.)

la deuxième raison pour laquelle je voulais mentionner cette solution alternative est que, bien qu'elle m'ait bien servi dans un certain nombre de fichiers spec, j'ai rencontré un problème avec elle dans un cas:

Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: ButtonComponent,Mock

Je n'ai pas tout à fait compris comment cette maquette et mon ButtonComponent utilisaient le même sélecteur, donc la recherche d'une autre approche m'a conduit ici à la solution de @raykrow.

si vous utilisez des modules partagés, ajoutez simplement RouterModule à un Module où votre composant est déclaré et n'oubliez pas d'ajouter <router-outlet></router-outlet>

référencé d'ici RouterLink ne fonctionne pas

ma solution est simple. J'utilise [href] au lieu de [routerLink]. J'ai essayé toutes les solutions pour [routerLink]. Aucun d'entre eux travaille dans mon cas.

voici ma solution:

<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>

Ecrivez ensuite la fonction getPlanUrl dans le fichier TS.