Module '"angular2/angular2"' has no exported member 'For'

typescript angular typescript1.5

16,810

Solution 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.

Solution 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

16,810

Author by

Franva

I am a software engineer, working on the .NET platform. I am interested in developing mobile apps, Computer Vision, Image Processing, playing guitar and piano, travelling, cooking etc.

Updated on July 21, 2022

Comments

Franva almost 2 years

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:

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, For} from 'angular2/angular2';

@Component({
    selector: 'display'
})
@View({
    template: '<p>name: {{myName}}</p>' +
                '<p>Friends:</p>' +
                '<ul>'+
                 '<li *for="#name of names">'+
                    '{{name}}'+
                 '<li>'+
                '<ul>',
    directives: [For]
})
class DisplayComponent{
    myName: string;
    names: Array<string>;

    constructotr(){
        this.myName = "Alice";
        this.names = ["Winston", "Alex", "Shannon", "Irizu"];
    }
}

bootstrap(DisplayComponent);

Here is my html:

<html>
<head>
        <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
</head>
<body>
    <display></display>
    <script>
      System.import('show-properties');
    </script>
</body>

</html>

And I have installed angular2, Rx and es6-promise.

Still the error persists.

message TS6042: Compilation complete. Watching for file changes. message TS6032: File change detected. Starting incremental compilation... show-properties.ts(2,37): error TS2305: Module '"angular2/angular2"' has no expo rted member 'For'. message TS6042: Compilation complete. Watching for file changes.

Update

Here is my updated .ts code:

/// <reference path="typings/angular2/angular2.d.ts" />
import {
 ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap, NgFor
} from 'angular2/angular2';



@Component({
    selector: 'display'
})
@View({
    template: '<p>name: {{myName}}</p>' +
                '<p>Friends:</p>' +
                '<ul>'+
                 '<li *ng-for="#name of names">'+
                    '{{name}}'+
                 '<li>'+
                '<ul>',
    directives: [NgFor]
})
class DisplayComponent{
    myName: string;
    names: Array<string>;

    constructotr(){
        this.myName = "Alice";
        this.names = ["Winston", "Alex", "Shannon", "Irizu"];
    }
}

bootstrap(DisplayComponent);

angular2.d.ts is still alpha 26.

Now there is no error message and I can see

name: Friends:

But no values are inserted. And I've got an error message:

show-properties.ts(7,2): error TS2348: Value of type 'typeof ComponentAnnotation ' is not callable. Did you mean to include 'new'? show-properties.ts(10,2): error TS2348: Value of type 'typeof ViewAnnotation' is not callable. Did you mean to include 'new'? message TS6042: Compilation complete. Watching for file changes.