模块'" angular2 / angular2"'没有出口成员“对于' [英] Module '"angular2/angular2"' has no exported member 'For'

查看:834
本文介绍了模块'" angular2 / angular2"'没有出口成员“对于'的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我下面的官方Angular2网站上的教程。
<一href=\"https://angular.io/docs/js/latest/guide/displaying-data.html\">https://angular.io/docs/js/latest/guide/displaying-data.html

下面是我的TS文件

  ///&lt;参考路径=分型/ angular2 / angular2.d.ts/&GT;
进口{组件,视图,引导,对于}的'angular2 / angular2';@零件({
    选择:'显示'
})
@视图({
    模板:'&LT; P&GT;名称:{{} MYNAME}&LT; / P&GT;' +
                '&LT; P&GT;朋友:LT; / P&GT;' +
                '&LT; UL&GT;'+
                 '&LT;李*的= GT的名字#名;+
                    {{名}}'+
                 '&LT;立GT;'+
                '&所述; UL&GT;',
    指令:[供]
})
类DisplayComponent {
    MYNAME:字符串;
    名称:数组&LT;字符串取代;    constructotr(){
        this.myName =爱丽丝;
        this.names =温斯顿,亚历克斯,香,Irizu];
    }
}引导(DisplayComponent);

下面是我的html:

 &LT; HTML和GT;
&LT; HEAD&GT;
        &LT;脚本src=\"https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js\"></script>
        &所述; SCRIPT SRC =htt​​ps://jspm.io/system@0.16.js&GT;&下; /脚本&GT;
        &LT;脚本SRC =HTTPS://$c$c.angularjs.org/2.0.0-alpha.23/angular2.dev.js&GT;&LT; / SCRIPT&GT;
&LT; /头&GT;
&LT;身体GT;
    &lt;显示&GT;&LT; /显示&GT;
    &LT;脚本&GT;
      System.import('显示的属性');
    &LT; / SCRIPT&GT;
&LT; /身体GT;&LT; / HTML&GT;

和我已经安装了angular2,Rx和ES6-承诺。

不过的错误仍然存​​在。


  

消息TS6042:编制完成。看着文件更改。
  消息TS6032:文件更改检测。启动增量
  编译...显示-properties.ts(2.37):错误TS2305:模块
  'angular2 / angular2没有世博rted成员对。消息TS6042:
  编制完成。看着文件更改。



更新

下面是我的更新TS code:

  ///&lt;参考路径=分型/ angular2 / angular2.d.ts/&GT;
进口{
 ComponentAnnotation作为组件,
  ViewAnnotation作为视图,引导,NgFor
}从angular2 / angular2';@零件({
    选择:'显示'
})
@视图({
    模板:'&LT; P&GT;名称:{{} MYNAME}&LT; / P&GT;' +
                '&LT; P&GT;朋友:LT; / P&GT;' +
                '&LT; UL&GT;'+
                 '&LT;李* NG-的= GT的名字#名;+
                    {{名}}'+
                 '&LT;立GT;'+
                '&所述; UL&GT;',
    指令:[NgFor]
})
类DisplayComponent {
    MYNAME:字符串;
    名称:数组&LT;字符串取代;    constructotr(){
        this.myName =爱丽丝;
        this.names =温斯顿,亚历克斯,香,Irizu];
    }
}引导(DisplayComponent);

angular2.d.ts仍是阿尔法26。

现在没有任何错误信息,我可以看到
名称:
朋友:

但是,没有值插入。
而我得到了一个错误信息:


  

显示-properties.ts(7,2):错误TS2348:类型的值的typeof
  ComponentAnnotation'不是调用。您的意思是包括新?
  展会-properties.ts(10,2):错误TS2348:类型的值的typeof
  ViewAnnotation'不是调用。您的意思是包括新?
  消息TS6042:编制完成。看着文件更改。



解决方案

您的问题是,文档不同步。如果你按照安装文档最近那就已经安装了最新版本的alpha26,里面有很多破碎的变化分型。和文档采用A23版本,该版本code的。您可以

1)更新您的分型,以匹配V23,它可以此处找到它。复制的内容,并在 ./分型/ angular2 / angular2.d.ts 替换它。

2)升级角脚本阿尔法26 并修复一些事情。


  • 现在 NgFor 如果 NgIf

  • *为现在 * NG-对 *如果现在 * NG-如果 ...

  • 注射剂(如果你打算在你的指令设置,使用)现在是 appInjector


  • 安装 ES6-承诺 RX RX-精简版分型使用相同的 TSD查询XXX --action安装命令。

    演示 - 23

    演示 - 26


您也可以使用启动从角类的WebPack首发

hi 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/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></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 the alpha 26.

Now there is no error message and I can see name: Friends:

But no values are inserted. And I 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.

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

这篇关于模块'&QUOT; angular2 / angular2&QUOT;'没有出口成员“对于'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆