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.
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.
Foris nowNgFor,Ifis nowNgIf*foris now*ng-for,*ifis now*ng-if...injectables(if you intend to use in your directive settings) is nowappInjectorinstall typings for
es6-promise,rxandrx-liteusing the sametsd query xxx --action installcommand.Demo - 23
Demo - 26
You could also use the startup from angular-class webpack starter.