Excepción de Angular2: no se puede vincular a 'routerLink' ya que no es una propiedad nativa conocida
Obviamente, la versión beta de Angular2 es más nueva que nueva, por lo que no hay mucha información disponible, pero estoy tratando de hacer lo que creo que es un enrutamiento bastante básico.
Hackear el código de inicio rápido y otros fragmentos del sitio web https://angular.io ha dado como resultado la siguiente estructura de archivos:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
Con los archivos completados de la siguiente manera:
índice.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>
arranque.ts
import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
aplicación.componente.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 { }
prueba-de-ruteo.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 { }
Al intentar ejecutar este código se produce el error:
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
Encontré un problema vagamente relacionado aquí; Directivas de enlace de enrutador rotas después de actualizar a angular2.0.0-beta.0 . Sin embargo, el "ejemplo funcional" en una de las respuestas se basa en un código pre-beta, que puede que aún funcione, pero me gustaría saber por qué el código que he creado no funciona.
¡Cualquier sugerencia será recibida con gratitud!
>=RC.5
importar el RouterModule
Ver también https://angular.io/guide/router
@NgModule({
imports: [RouterModule],
...
})
>=RC.2
aplicación.rutas.ts
import { provideRouter, RouterConfig } from '@angular/router';
export const routes: RouterConfig = [
...
];
export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];
principal.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);
<=RC.1
Falta tu código
@Component({
...
directives: [ROUTER_DIRECTIVES],
...)}
No puede utilizar directivas como routerLinko router-outletsin que su componente las conozca.
Si bien los nombres de las directivas se cambiaron para que distingan entre mayúsculas y minúsculas en Angular2, los elementos todavía se usan -en el nombre <router-outlet>para ser compatibles con las especificaciones de los componentes web que requieren una -en el nombre de los elementos personalizados.
registrarse globalmente
Para que esté ROUTER_DIRECTIVESdisponible globalmente, agregue este proveedor a bootstrap(...):
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
entonces ya no es necesario agregar ROUTER_DIRECTIVESa cada componente.
Para las personas que encuentran esto al intentar ejecutar pruebas a través de npm testKarma ng testo cualquier otra cosa. Su módulo .spec necesita una importación de prueba de enrutador especial para poder compilarse.
import { RouterTestingModule } from '@angular/router/testing';
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/
Advertencia al codificar con Visual Studio (2013)
He perdido de 4 a 5 horas intentando depurar este error. Probé todas las soluciones que encontré en StackOverflow al pie de la letra y todavía recibo este error:Can't bind to 'routerlink' since it isn't a known native property
Tenga en cuenta que Visual Studio tiene la desagradable costumbre de formatear automáticamente el texto cuando copia y pega código. Siempre recibí un pequeño ajuste instantáneo de VS13 (la caja camel desaparece).
Este:
<div>
<a [routerLink]="['/catalog']">Catalog</a>
<a [routerLink]="['/summary']">Summary</a>
</div>
Se convierte en:
<div>
<a [routerlink]="['/catalog']">Catalog</a>
<a [routerlink]="['/summary']">Summary</a>
</div>
Es una pequeña diferencia, pero suficiente para provocar el error. La parte más fea es que esta pequeña diferencia seguía evitando mi atención cada vez que copiaba y pegaba. Por pura casualidad vi esta pequeña diferencia y la solucioné.
