>=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.
Since this is at least the third time I've wasted more than 5 min on this problem I figured I'd post the Q & A. I hope it helps someone else down the road... probably me!
I typed in
instead of of
in the ngFor expression.
Befor 2-beta.17, it should be:
<div *ngFor="#talk of talks">
As of beta.17, use the let
syntax instead of #
. See the UPDATE further down for more info.
Note that the ngFor syntax "desugars" into the following:
<template ngFor #talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in
instead, it turns into
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
Since ngForIn
isn't an attribute directive with an input property of the same name (like ngIf
), Angular then tries to see if it is a (known native) property of the template
element, and it isn't, hence the error.
UPDATE - as of 2-beta.17, use the let
syntax instead of #
. This updates to the following:
<div *ngFor="let talk of talks">
Note that the ngFor syntax "desugars" into the following:
<template ngFor let-talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in
instead, it turns into
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
Best Answer
I missed
let
in front oftalk
:Note that as of beta.17 usage of
#...
to declare local variables inside of structural directives like NgFor is deprecated. Uselet
instead.<div *ngFor="#talk of talks">
now becomes<div *ngFor="let talk of talks">
Original answer:
I missed
#
in front oftalk
:It is so easy to forget that
#
. I wish the Angular exception error message would instead say:you forgot that # again
.