Exceção Angular2: Não é possível vincular ao 'routerLink', pois não é uma propriedade nativa conhecida

277

Obviamente, a versão beta do Angular2 é mais nova que a nova, então não há muita informação por aí, mas estou tentando fazer o que acho que é um roteamento bastante básico.

A invasão com o código de início rápido e outros trechos do site https://angular.io resultou na seguinte estrutura de arquivo:

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

Com os arquivos sendo preenchidos da seguinte maneira:

index.html

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',
    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},
])

export class AppComponent { }

routing-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

Tentar executar este código produz o erro:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): AppComponent@2:11

Encontrei um problema vagamente relacionado aqui; Diretivas de link de roteador quebradas após a atualização para angular2.0.0-beta.0 . No entanto, o "exemplo de trabalho" em uma das respostas é baseado no código pré-beta - que ainda pode funcionar, mas eu gostaria de saber por que o código que criei não está funcionando.

Qualquer ponteiro seria recebido com gratidão!

angular

— Lester Burnham
fonte

4

A outra questão tem algo diferente: directives: [ROUTER_DIRECTIVES].

— Eric Martinez

1

Estou recebendo o mesmo erro, mesmo com ROUTER_DIRECTIVES. @Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})

— phil

8

Com a adição directives: [ROUTER_DIRECTIVES]e a alteração de [router-link] para [routerLink], não estou mais recebendo o erro.

— phil

392

> = RC.5

importe o RouterModule Consulte também https://angular.io/guide/router

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

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<= RC.1

Seu código está ausente

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

Você não pode usar diretivas como routerLinkou router-outletsem divulgá-las ao seu componente.

Embora os nomes das diretivas tenham sido alterados para fazer distinção entre maiúsculas e minúsculas no Angular2, os elementos ainda usam -o nome como <router-outlet>compatíveis com as especificações de componentes da web que requerem a -no nome de elementos personalizados.

registrar globalmente

Para disponibilizar ROUTER_DIRECTIVESglobalmente, adicione este provedor a bootstrap(...):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

não é mais necessário adicionar ROUTER_DIRECTIVESa cada componente.

— Günter Zöchbauer
fonte

1

sim, você pode atribuir várias directivas também no momento da bootstraping seu aplicativo como este: -provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, ETC...], multi: true})

— Pardeep Jain

1

Isso mesmo, mas já FORM_DIRECTIVESestão incluídos PLATFORM_DIRECTIVESpor padrão.

— Günter Zöchbauer

2

Isso foi ótimo, obrigado. Eu também encontrei este útil quando se tenta colocar tudo junto: stackoverflow.com/questions/34391790/...

— Jeff

Talvez uma pergunta estúpida aqui, mas o que é RC.1, RC.2 aqui? Estou usando o angular 2.1.2, qual é o RC?

— Jian Chen #

1

@AlexanderMills Por que os velhos andwers te assustam? Respostas antigas são testadas em batalha e, portanto, muito confiáveis; p

— Günter Zöchbauer

116

Para pessoas que encontram isso ao tentar executar testes porque via npm testou ng testusam o Karma ou qualquer outra coisa. Seu módulo .spec precisa de uma importação especial de teste de roteador para poder construir.

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

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

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

— rayepps
fonte

2

Esta é uma ótima captura! Meu projeto não estava tendo nenhum problema com a operação normal, era no specarquivo que eu tinha que adicionar isso. Obrigado @raykrow!

— Kbpontius

1

Confirmado para trabalhar também na angular 4. Obrigado por isso!

— JCisar #

Esta deve ser a resposta aceita, a resposta aceita é errado, porque ao importar RouterModule, então você precisa chamar forRootpara satisfazer o módulo e, em seguida, você deve fornecer o BASE_HREFe ...

— Milad

1

Você tem alguma idéia se isso é diferente para o Angular 5+? Estou recebendo o erro semelhante Can't bind to 'active' since it isn't a known property of 'a'.em vários dos meus testes de unidade e importado RouterTestingModule.

— Stuart Updegrave

25

Palavra de cautela ao codificar com o Visual Studio (2013)

Eu perdi 4 a 5 horas tentando depurar esse erro. Tentei todas as soluções que encontrei no StackOverflow pela letra e ainda recebi este erro:Can't bind to 'routerlink' since it isn't a known native property

Esteja ciente de que o Visual Studio tem o hábito desagradável de formatação automática de texto quando você copia / cola código. Eu sempre recebi um pequeno ajuste instantâneo do VS13 (a caixa de camelo desaparece).

Este:

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

Torna-se:

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

É uma pequena diferença, mas o suficiente para acionar o erro. A parte mais feia é que essa pequena diferença ficava evitando a minha atenção toda vez que eu copiava e colava. Por mero acaso, vi essa pequena diferença e a resolvi.

— Adrian Moisa
fonte

4

Obrigado, você poderia ter mencionado a diferença entre "routerlink" e "routerLink". Angular 2 espera que "routerLink" esteja presente, mas encontre "routerlink"

— Narendran Solai Sridharan

Obrigado, por algum motivo, algum tutorial usou o "roteador-link" com o traço no meio. Mas routerLink é a versão correta.

— Windmaomao 16/08/19

O mesmo acontece com o webpack e o html-minifier, mas apenas na produção. adicione caseSensitive: true às opções do html-loader, consulte: github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-an‌ gular para uma configuração angular de trabalho 5 + webpack 3.9

— Samantha Adrichem

12

Para> = V5

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

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

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

componente:

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

Para <V5

Também pode usar RouterLinkcomo um directivesie. directives: [RouterLink]. isso funcionou para mim

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},
])

— Shaishab Roy
fonte

Eu acho que isso não se aplica mais (Angular 5) etc.

— Alexander Mills

10

Em geral, sempre que você recebe um erro como esse Can't bind to 'xxx' since it isn't a known native property, a causa mais provável é esquecer de especificar um componente ou uma diretiva (ou uma constante que contenha o componente ou a diretiva) na directivesmatriz de metadados. Esse é o caso aqui.

Como você não especificou RouterLinkou a constante ROUTER_DIRECTIVES- que contém o seguinte :

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

- na directivesmatriz, quando Angular analisa

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

não conhece a diretiva RouterLink (que usa o seletor de atributosrouterLink ). Como o Angular sabe qual é o aelemento, ele assume que [routerLink]="..."é uma ligação de propriedade para o aelemento. Mas, em seguida, descobre que routerLinknão é uma propriedade nativa dos aelementos, portanto, lança a exceção sobre a propriedade desconhecida.

Eu realmente nunca gostei da ambiguidade da sintaxe . Ou seja, considere

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

Apenas olhando para o HTML, não podemos dizer se whatIsThisé

uma propriedade nativa de something
o seletor de atributos de uma diretiva
uma propriedade de entrada de something

Precisamos saber quais directives: [...]são especificados nos metadados do componente / diretiva para interpretar mentalmente o HTML. E quando esquecemos de colocar algo na directivesmatriz, sinto que essa ambiguidade torna um pouco mais difícil a depuração.

— Mark Rajcok
fonte

7

Você tem no seu módulo

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

você tem que exportar o módulo RouteModule

exemplo:

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

para poder acessar as funcionalidades de todos os que importam este módulo.

— alehn96
fonte

5

Eu tentei todos os métodos mencionados acima. Mas nenhum método funciona para mim. Finalmente, eu tenho a solução para o problema acima e está funcionando para mim.

Eu tentei este método:

Em HTML:

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

No arquivo TS:

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

— Sunil Kumar KK
fonte

4

No meu caso, importei o RouterModule no módulo App, mas não o importei no meu módulo de recursos. Depois de importar o módulo roteador no meu EventModule, o erro desaparece.

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 {

 }

— Code-EZ
fonte

3

Se receber este erro durante o teste de unidade, escreva-o.

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
   imports: [RouterTestingModule],
   declarations: [AppComponent],
 });
}));

— Deeksha Bilochi
fonte

0

Eu realmente aprecio a resposta de @ raykrow quando alguém tem esse problema apenas em um arquivo de teste! Foi aí que eu o encontrei.

Como geralmente é útil ter outra maneira de fazer algo como backup, eu queria mencionar essa técnica que também funciona (em vez de importar RouterTestingModule):

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

(Normalmente, alguém usaria routerLinkem um <a>elemento, mas ajustaria o seletor de acordo com outros componentes.)

A segunda razão pela qual eu quis mencionar essa solução alternativa é que, embora ela tenha me servido bem em vários arquivos de especificação, tive um problema com ela em um caso:

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

Eu não conseguia entender como esse mock e meu ButtonComponentestavam usando o mesmo seletor; portanto, procurar uma abordagem alternativa me levou aqui à solução da @ raykrow.

— Michael Sorens
fonte

0

Se você usa módulos compartilhados, basta adicionar RouterModule a um módulo em que seu componente é declarado e não se esqueça de adicionar <router-outlet></router-outlet>

Referenciado a partir daqui, o RouterLink não funciona

— Yevheniy Potupa
fonte

-4

Minha solução é simples. Estou usando [href] em vez de [routerLink]. Eu tentei todas as soluções para [routerLink]. Nenhum deles funciona no meu caso.

Aqui está a minha solução:

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

Em seguida, escreva a getPlanUrlfunção no arquivo TS.

— G Chen
fonte