Angular2 अपवाद: 'रूटरलिंक' के लिए बाध्य नहीं किया जा सकता क्योंकि यह एक ज्ञात मूल संपत्ति नहीं है

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

मुझे यहाँ एक अस्पष्ट रूप से संबंधित मुद्दा मिला; राउटर-लिंक निर्देश 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][राऊटर-लिंक] से [राऊटरलिंक] तक जुड़ने और बदलने के साथ मुझे अब त्रुटि नहीं मिल रही है।

— फिल

392

> = RC.5

आयात RouterModule भी देखें 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

आपका कोड गायब है

  @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})

— परदीप जैन

1

यह सही है, लेकिन पहले से ही डिफ़ॉल्ट रूप से FORM_DIRECTIVESशामिल हैं PLATFORM_DIRECTIVES।

— गुंटर ज़ोचबॉयर

2

यह बहुत अच्छा था, धन्यवाद। मुझे यह भी उपयोगी लगा जब यह सब एक साथ रखने की कोशिश कर रहा था: stackoverflow.com/questions/34391790/…

— जेफ

शायद यहाँ एक बेवकूफ सवाल है, लेकिन RC.1, RC.2 यहाँ क्या है? मैं कोणीय 2.1.2 का उपयोग कर रहा हूं, यह कौन सा RC है?

— जियान चेन

1

@AlexanderMills क्यों पुराने और आपको डराते हैं? पुराने उत्तर लड़ाई-परीक्षण हैं और इसलिए बहुत भरोसेमंद हैं; पी

— गुंटर ज़ोचबॉएर

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 में भी काम करने की पुष्टि की। इसके लिए धन्यवाद!

— जेसीसार

यह स्वीकृत उत्तर होना चाहिए, स्वीकृत उत्तर गलत है, क्योंकि जब आयात करते हैं RouterModule, तो आपको forRootमॉड्यूल को संतुष्ट करने के लिए कॉल करने की आवश्यकता होती है और फिर आपको BASE_HREFऔर प्रदान करना चाहिए ...

— Milad

1

क्या आपके पास कोई आइडिया है अगर यह एंगुलर 5+ के लिए अलग है? मुझे Can't bind to 'active' since it isn't a known property of 'a'.अपने कई यूनिट परीक्षणों में समान त्रुटि मिल रही है , और आयात किया है RouterTestingModule।

— स्टुअर्ट उपदेग्रे

25

विजुअल स्टूडियो (2013) के साथ कोडिंग करते समय सावधानी के शब्द

मैंने इस त्रुटि को समाप्त करने के लिए 4 से 5 घंटे बर्बाद किए हैं। मैंने सभी समाधानों की कोशिश की जो मुझे पत्र द्वारा स्टैकऑवरफ्लो पर मिले और मुझे अभी भी यह त्रुटि मिली है: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

धन्यवाद, आपने "राउटरलिंक" बनाम "राउटरलिंक" के मामले में अंतर का उल्लेख किया है। कोणीय 2 "राउटरलिंक" के मौजूद होने की उम्मीद करता है लेकिन "राउटरलिंक" पाता है

— नरेंद्रन सोलई श्रीधरन

धन्यवाद, किसी कारण से, कुछ ट्यूटोरियल ने बीच में डैश के साथ "राउटर-लिंक" का उपयोग किया। लेकिन रूटरलिंक सही संस्करण है।

— विंडमाओओओ

ऐसा ही वेबपैक और html-minifier के साथ होता है, लेकिन केवल उत्पादन में। केस जोड़ें: html- लोडर विकल्पों के लिए सही: देखें: github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-an एक काम करने वाले कोणीय 5 +

— वेबपैक

12

के लिए> = वी 5

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>
        `
})

<वी 5 के लिए

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

— शशिभ रॉय
स्रोत

मुझे नहीं लगता कि यह अब (कोणीय 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सरणी में, तब जब कोणीय पार्स

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

यह राउटरलिंक निर्देश (जो कि चयनकर्ता का उपयोग करता हैrouterLink ) के बारे में नहीं जानता है । चूंकि कोणीय को पता है कि aतत्व क्या है, यह मानता है कि तत्व के लिए [routerLink]="..."एक संपत्ति बाध्यकारी है a। लेकिन यह तब पता चलता है कि तत्वों routerLinkकी मूल संपत्ति नहीं है a, इसलिए यह अज्ञात संपत्ति के बारे में अपवाद फेंकता है।

मुझे सिंटैक्स की अस्पष्टता वास्तव में पसंद नहीं है । यानी, विचार करें

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

बस HTML को देखकर हम नहीं बता सकते कि क्या whatIsThisहै

की एक देशी संपत्ति something
एक निर्देश का गुण चयनकर्ता
की एक इनपुट संपत्ति something

हमें यह जानना होगा कि directives: [...] कि HTML को मानसिक रूप से व्याख्या करने के लिए घटक / निर्देश के मेटाडेटा में से निर्दिष्ट हैं। और जब हम किसी चीज़ को directivesसरणी में रखना भूल जाते हैं , तो मुझे लगता है कि यह अस्पष्टता इसे डिबग करना थोड़ा कठिन है।

— राज रजोक
स्रोत

7

आपके मॉड्यूल में है

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

आपको मॉड्यूल रूटमॉडल को निर्यात करना होगा

उदाहरण:

@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

मेरे मामले में मैंने ऐप मॉड्यूल में राउटरमॉड्यूल को आयात किया है, लेकिन मेरे फीचर मॉड्यूल में आयात नहीं किया गया है। मेरे 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 {

 }

— कोड-ईज़ी
स्रोत

3

यदि इकाई परीक्षण के दौरान यह त्रुटि हो रही है तो कृपया इसे लिखें।

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

— दीखेसा बिलोची
स्रोत

0

मैं वास्तव में @ रेकोरो के उत्तर की सराहना करता हूं जब किसी को यह समस्या केवल एक परीक्षण फ़ाइल में होती है! यही वह जगह है जहां मैंने इसका सामना किया।

जैसा कि अक्सर बैकअप के रूप में कुछ करने का एक और तरीका होना सहायक होता है, मैं इस तकनीक का उल्लेख करना चाहता था जो काम भी करती है (आयात के बजाय 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एक ही चयनकर्ता कैसे उपयोग कर रहे हैं, इसलिए एक वैकल्पिक दृष्टिकोण की खोज ने मुझे यहाँ @ रेकोरो के समाधान के लिए प्रेरित किया।

— माइकल सोरेंस
स्रोत

0

यदि आप साझा मॉड्यूल का उपयोग करते हैं, तो बस RouterModule को एक मॉड्यूल में जोड़ें जहां आपका घटक घोषित किया गया है और जोड़ना मत भूलना <router-outlet></router-outlet>

यहां से संदर्भित RouterLink काम नहीं करता है

— येवहनी पोतुपा
स्रोत

-4

मेरा समाधान सरल है। मैं [राऊटरलिंक] के बजाय [href] का उपयोग कर रहा हूँ। मैंने [रूटरलिंक] के लिए सभी समाधानों की कोशिश की है। उनमें से कोई भी मेरे मामले में काम नहीं करता है।

यहाँ मेरा समाधान है:

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

फिर getPlanUrlTS फ़ाइल में फ़ंक्शन लिखें ।

— जी चेन
स्रोत