Module '“angular2/angular2”' has no exported member 'For'

Question

I am following the tutorial on the official Angular2 website.

https://angular.io/docs/js/latest/guide/displaying-data.html

Here is my .ts file:

Answer 1

Your issue is that the documentation is not in sync. If you followed the documentation for installation recently then it would have installed the typings for latest version alpha26, which has a lot of broken changes. And the documentation uses a23 version with that version of code. You can either

1) Update your typings to older version that matches v23, which you can find it here. Copy the contents and replace it in ./typings/angular2/angular2.d.ts.

2) Upgrade your angular script to alpha 26 and fix couple of things.

• For is now NgFor, If is now NgIf
• *for is now *ng-for, *if is now *ng-if ...

• injectables (if you intend to use in your directive settings) is now appInjector

• install typings for es6-promise, rx and rx-lite using the same tsd query xxx --action install command.

  Demo - 23

  Demo - 26

You could also use the startup from angular-class webpack starter.

Answer 2

Yes, the renamed for to ng-for. Same with ng-if. Just update it in your ts file and view.

I have a few samples here if you are interested in some working Angular 2.0 examples: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples