Исключение Angular2: Невозможно привязать к routerLink, так как это не известное нативное свойство

277

Очевидно, что бета-версия для Angular2 новее, чем новая, поэтому информации там немного, но я пытаюсь сделать то, что я считаю довольно простой маршрутизацией.

Использование кода быстрого запуска и других фрагментов с веб-сайта https://angular.io привело к следующей структуре файлов:

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

Файлы заполняются следующим образом:

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

маршрутизации-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 { }

Попытка запустить этот код приводит к ошибке:

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

Я нашел смутно связанную проблему здесь; директивы router-link не работают после обновления до angular2.0.0-beta.0 . Тем не менее, «рабочий пример» в одном из ответов основан на пре-бета-коде, который вполне может работать, но я хотел бы знать, почему созданный мною код не работает.

Любые указатели будут с благодарностью приняты!

angular 
— Лестер Бернхэм
источник
4
Другой вопрос , есть что - то другое: directives: [ROUTER_DIRECTIVES].
— Эрик Мартинес
1
Я получаю ту же ошибку даже с ROUTER_DIRECTIVES. @Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
— Фил
8
С добавлением directives: [ROUTER_DIRECTIVES]и изменением с [router-link] на [routerLink] я больше не получаю ошибку.
— Фил

Ответы:

392

> = RC.5

импортировать RouterModule См. также https://angular.io/guide/router

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

> = РК-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

Ваш код отсутствует 

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

Вы не можете использовать директивы, такие как routerLinkили router-outletне делая их известными вашему компоненту.

Хотя в Angular2 имена директив были изменены, чтобы в них учитывался регистр символов, элементы по-прежнему используют -в имени, как будто <router-outlet>они совместимы со спецификацией веб-компонентов, для которой требуется использовать -имя пользовательских элементов.

зарегистрироваться глобально

Чтобы сделать ROUTER_DIRECTIVESглобально доступным, добавьте этого провайдера в bootstrap(...):

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

тогда больше не нужно добавлять ROUTER_DIRECTIVES к каждому компоненту.

— Гюнтер Цохбауэр
источник
1
да, вы также можете назначить несколько директив во время начальной загрузки вашего приложения следующим образом: -provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, ETC...], multi: true})
— Pardeep Jain
1
Это верно, но FORM_DIRECTIVESвключены PLATFORM_DIRECTIVESпо умолчанию уже.
— Гюнтер Цохбауэр
2
Это было здорово, спасибо. Я также нашел это полезным, когда пытался собрать все это вместе: stackoverflow.com/questions/34391790/…
— Джефф
Может быть, глупый вопрос здесь, но что здесь RC.1, RC.2? Я использую угловой 2.1.2, какой RC это?
— Цзянь Чен
1
@AlexanderMills, почему старые андерверы тебя пугают? Старые ответы проверены в бою и поэтому заслуживают доверия; p
— Günter Zöchbauer
116

Для людей, которые находят это при попытке запустить тесты, потому что через npm testили ng testиспользуя карму или что-то еще. Ваш модуль .spec нуждается в специальном импорте тестирования маршрутизатора, чтобы его можно было собрать.

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

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

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

— rayepps
источник
2
Это отличный улов! У моего проекта не было никаких проблем с нормальной работой, specя должен был добавить это в файл. Спасибо @raykrow!
— kbpontius
1
Подтвердил работу в угловых 4, а также. Спасибо за это!
— JCisar
Это должен быть принятый ответ, принятый ответ неправильный, потому что при импорте RouterModuleвам нужно позвонить, forRootчтобы удовлетворить модуль, а затем вы должны предоставить BASE_HREFи ...
— Milad
1
У вас есть идея, если это отличается от Angular 5+? Я получаю похожую ошибку Can't bind to 'active' since it isn't a known property of 'a'.в нескольких моих модульных тестах и ​​импортирую RouterTestingModule.
— Стюарт Апдегрейв,
25

Слово предостережения при кодировании в Visual Studio (2013)

Я потратил 4-5 часов, пытаясь отладить эту ошибку. Я попробовал все решения, которые я нашел в StackOverflow по письму, и я все еще получил эту ошибку:Can't bind to 'routerlink' since it isn't a known native property

Имейте в виду, Visual Studio имеет неприятную привычку автоформатирования текста при копировании / вставке кода. Я всегда получал небольшую мгновенную настройку от VS13 (верблюжий чехол исчезает).

Это:

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

становится:

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

Это небольшая разница, но достаточно, чтобы вызвать ошибку. Самое уродливое то, что эта небольшая разница просто избегала моего внимания каждый раз, когда я копировал и вставлял. По чистой случайности я увидел эту небольшую разницу и решил ее.

— Адриан Мойса
источник
4
Спасибо, вы могли бы упомянуть разницу между "routerlink" и "routerLink". Angular 2 ожидает присутствия «routerLink», но обнаруживает «routerlink»
— Нарендран Солаи Шридхаран
Спасибо, по какой-то причине, в каком-то учебном пособии использовался "router-link" с тире между ними. Но routerLink - правильная версия.
— windmaomao
То же самое происходит с webpack и html-minifier, но только в производстве. добавить caseSensitive: true для параметров html-загрузчика, см .: github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-an‌ gular для рабочей угловой конфигурации 5 + webpack 3.9
— Саманта Адричем
12

Для> = V5

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

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

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

составная часть:

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

Для <V5

Также можно использовать RouterLinkкак directivesт.е. directives: [RouterLink], это сработало для меня

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},
])
— Шайшаб Рой
источник
Я не думаю, что это больше применимо (Angular 5) и т. Д.
— Александр Миллс
10

В общем, всякий раз, когда вы получаете сообщение об ошибке Can't bind to 'xxx' since it isn't a known native property, наиболее вероятная причина - забыть указать компонент или директиву (или константу, которая содержит компонент или директиву) вdirectives массиве метаданных. Так обстоит дело здесь.

Так как вы не указали RouterLinkили константу ROUTER_DIRECTIVES- которая содержит следующее :

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

- в directivesмассиве, тогда когда Angular разбирает

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

он не знает о директиве RouterLink (которая использует селектор атрибутаrouterLink ). Поскольку Angular действительно знает, что это за aэлемент, он предполагает, что [routerLink]="..."это привязка свойства для aэлемента. Но затем он обнаруживает, что routerLinkне является нативным свойством aэлементов, и, следовательно, выдает исключение о неизвестном свойстве.

Мне никогда не нравилась неоднозначность синтаксиса . То есть рассмотрим

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

Просто глядя на HTML, мы не можем сказать, если whatIsThisэто

  • родная собственность something
  • селектор атрибута директивы
  • входное свойство something

Мы должны знать, что directives: [...]указано в метаданных компонента / директивы, чтобы мысленно интерпретировать HTML. И когда мы забываем поместить что-либо в directivesмассив, я чувствую, что эта двусмысленность усложняет отладку.

— Марк Райкок
источник
7

У вас в вашем модуле

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

Вы должны экспортировать модуль RouteModule

пример:

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

чтобы иметь доступ к функциям для всех, кто импортирует этот модуль.

— alehn96
источник
5

Я перепробовал все методы, которые упомянуты выше. Но ни один метод не работает для меня. В конце концов я получил решение для вышеупомянутой проблемы, и он работает для меня.

Я попробовал этот метод:

В HTML:

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

В файле TS:

aboutPageLoad() {
    this.router.navigate(['/about']);
}
— Сунил Кумар КК
источник
4

В моем случае я импортировал модуль RouterModule в приложение, но не импортировал его в свой функциональный модуль. После импорта модуля роутера в мой EventModule ошибка исчезает.

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 {

 }
— Код-EZ
источник
3

Если вы получили эту ошибку во время модульного тестирования, напишите это.

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
   imports: [RouterTestingModule],
   declarations: [AppComponent],
 });
}));
— Дикша Билочи
источник
0

Я действительно ценю ответ @ raykrow, когда эта проблема возникает только в тестовом файле! Вот где я с этим столкнулся.

Поскольку часто полезно иметь другой способ сделать что-то в качестве резервной копии, я хотел бы упомянуть эту технику, которая также работает (вместо импорта RouterTestingModule):

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

(Как правило, можно использовать routerLinkна<a> элементе , но отрегулировать селектор соответствующим образом для других компонентов.)

Вторая причина, по которой я хотел упомянуть об этом альтернативном решении, заключается в том, что, хотя он хорошо послужил мне в ряде файлов спецификаций, я столкнулся с проблемой в одном случае:

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

Я не мог понять, как этот макет и я ButtonComponentиспользовали один и тот же селектор, поэтому поиск альтернативного подхода привел меня к решению @ raykrow.

— Майкл Соренс
источник
-4

Мое решение простое. Я использую [href] вместо [routerLink]. Я перепробовал все решения для [routerLink]. Ни один из них не работает в моем случае.

Вот мое решение:

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

Затем запишите getPlanUrlфункцию в файл TS.

— Чен
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.