Can't bind to 'routerLink' since it isn't a known native property

Question

This error happened when i tried to add hashlocationstrategy

boot.ts

///<reference path="../typings/browser.d.ts"/>

import { bootstrap } from "angular2/platform/browser";
import { RootComponent } from "./root.component";
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, LocationStrategy, HashLocationStrategy} from "angular2/router";
import { PLATFORM_DIRECTIVES, provide, enableProdMode } from "angular2/core";
import { HTTP_PROVIDERS } from "angular2/http";
import { FirebaseService } from "./shared/firebase.service";
import { Environment } from "./config/environment";

if (Environment === "production") {
  enableProdMode();
}


bootstrap(RootComponent, [
  FirebaseService,
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(
    [PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true}],
    [LocationStrategy, {useClass: HashLocationStrategy}]
  )
])
  .catch(err => console.error(err));

Think its because my syntax of using both platform directives and locationstrategy like that is wrong. Any clues?

score 1 · Accepted Answer · edited Mar 15 '16 at 12:35

1

There need to be separate provide() for both PLATFORM_DIRECTIVES and LocationStrategy

bootstrap(RootComponent, [
  FirebaseService,
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,

  provide(PLATFORM_DIRECTIVES, {useValue: ROUTER_DIRECTIVES, multi: true}),
  provide(LocationStrategy, {useClass: HashLocationStrategy})

  .catch(err => console.error(err));

edited Mar 15 '16 at 12:35

micronyks

54,797
15
112
146

answered Mar 15 '16 at 12:13

Günter Zöchbauer

623,577
216
2,003
1,567

hmm then i get this in TS lint without the brackets `Supplied parameters do not match any signature of call target.` and it won't compile – Petros Kyriakou Mar 15 '16 at 12:15
I updated my answer. – Günter Zöchbauer Mar 15 '16 at 12:17
1

great this works thank you! – Petros Kyriakou Mar 15 '16 at 12:19

Thierry Templier · Answer 2 · 2016-03-15T12:24:38.097

0

You could try this to bootstrap your application this way:

bootstrap(RootComponent, [
  FirebaseService,
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(
    PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true}),
  provide(LocationStrategy, {useClass: HashLocationStrategy})
])
.catch(err => console.error(err));

See this plunkr: https://plnkr.co/edit/6fXmPi?p=preview

edited Mar 15 '16 at 12:24

answered Mar 15 '16 at 12:11

Thierry Templier

198,364
44
396
360

hmm can you check this thread please? its mine and it works without hashstrategy `http://stackoverflow.com/questions/35878966/router-directives-in-two-places-for-same-purpose/35880222#35880222` – Petros Kyriakou Mar 15 '16 at 12:12
Yes you're right. I missed a part of your question. I think that you don't use the `provide` function the right way... I updated my answer accordingly. – Thierry Templier Mar 15 '16 at 12:25
Thank you for your answer but Günter Zöchbauer answered the same already ;o – Petros Kyriakou Mar 15 '16 at 12:36
Yes, I saw that after having edited my answer ;-) You're welcome and pleased to see you got the answer of your problem! @Günter was quickier ;-) – Thierry Templier Mar 15 '16 at 12:38

Can't bind to 'routerLink' since it isn't a known native property

2 Answers2