Angular2 Exception: Can’t bind to ‘routerLink’ since it isn’t a known native property

by

>=RC.5

import the RouterModule
See also 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

Your code is missing 

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

You can’t use directives like routerLink or router-outlet without making them known to your component.

While directive names were changed to be case-sensitive in Angular2, elements still use - in the name like <router-outlet> to be compatible with the web-components spec which require a - in the name of custom elements.

register globally

To make ROUTER_DIRECTIVES globally available, add this provider to bootstrap(...):

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

then it’s no longer necessary to add ROUTER_DIRECTIVES to each component.

More Related Contents:

  1. Angular 2 – View not updating after model changes
  2. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  3. Angular 4 – Http to HttpClient – property ‘someproperty’ does not exist on type Object
  4. When to use FormGroup vs. FormArray?
  5. mat-form-field must contain a MatFormFieldControl
  6. Working example of Angular 2.0 Material MdDialog with Angular 2.0
  7. Need to insert Script tag in angular 2
  8. How to bind event listener for rendered elements in Angular 2?
  9. Dynamically load HTML template in angular2
  10. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  11. Angular 2/4 component with dynamic template or templateUrl
  12. Angular 12 source map is missing in browser
  13. Angular 5 – Copy to clipboard
  14. Angular 4 checkbox change value
  15. Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json
  16. Cannot find name ‘require’ after upgrading to Angular4
  17. custom filter in mat-table
  18. How to globally set the preserveWhitespaces option in Angular to false?
  19. What is the difference between formControlName and FormControl?
  20. addControl to FormGroup dynamically in Angular
  21. How to make nested Observable calls in Angular2
  22. How to clear form after submit in Angular 2?
  23. Angular4 APP_INITIALIZER won’t delay initialization
  24. Page transition animations with Angular 2.0 router and component interface promises
  25. Angular load external configuration before AppModule loads
  26. Inject Http manually in Angular 2
  27. Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp
  28. Angular 6 Uncaught ReferenceError: Buffer is not defined
  29. Angular 6 Migration -.angular-cli.json to angular.json
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment