导入angular2/forms时出现“Cannot read property 'annotations' of undefined”错误

7
我正试图创建一个简单的表单,如http://angularjs.blogspot.no/2015/03/forms-in-angular-2.html所述。但是,当我添加 import {forms, required} from 'angular2/forms'; 时,它会崩溃。请注意,保留HTML标记。
TypeError: Cannot read property 'annotations' of undefined

TypeError: Cannot read property 'annotations' of undefined
    at ReflectionCapabilities.System.register.execute.$__export.annotations (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/reflection/reflection_capabilities.es6!eval:81:40)
    at Reflector.System.register.execute.$__export.annotations (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/reflection/reflector.es6!eval:81:50)
    at DirectiveMetadataReader.System.register.execute.$__export.read (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/directive_metadata_reader.es6!eval:31:41)
    at eval (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:127:35)
    at Array.map (native)
    at Function.System.register.execute.$__export.map (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/facade/collection.es6!eval:172:26)
    at Compiler.System.register.execute.$__export.createSteps (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:126:43)
    at Compiler.System.register.execute.$__export._compileTemplate (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:164:53)
    at eval (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:154:29)
    at Zone.run (http://localhost:9090/node_modules/zone.js/zone.js:87:19)

-----async gap-----
Error
    at Function.System.register.execute.$__export.then (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/facade/async.es6!eval:35:28)
    at Compiler.System.register.execute.$__export._compile (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:153:42)
    at Compiler.System.register.execute.$__export.compile (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/compiler/compiler.es6!eval:134:34)
    at eval (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:73:23)
    at Function.System.register.execute.$__export.apply (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/facade/lang.es6!eval:317:23)

-----async gap-----
Error
    at _AsyncInjectorStrategy.System.register.execute._AsyncInjectorStrategy.instantiate (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/di/injector.es6!eval:297:17)
    at Injector.System.register.execute.$__export._getByKey (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/di/injector.es6!eval:138:33)
    at Injector.System.register.execute.$__export.asyncGet (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/di/injector.es6!eval:112:25)
    at eval (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:113:39)

-----async gap-----
Error
    at VmTurnZone.System.register.execute.$__export._createInnerZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/zone/vm_turn_zone.es6!eval:61:45)
    at new VmTurnZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/zone/vm_turn_zone.es6!eval:29:34)
    at _createVmZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:101:16)
    at bootstrap (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:110:16)
    at y.main (http://localhost:9090/app.js!eval:10:12)
    at http://localhost:9090/?:42:21

-----async gap-----
Error
    at VmTurnZone.System.register.execute.$__export._createInnerZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/zone/vm_turn_zone.es6!eval:61:25)
    at new VmTurnZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/zone/vm_turn_zone.es6!eval:29:34)
    at _createVmZone (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:101:16)
    at bootstrap (http://localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:110:16)
    at y.main (http://localhost:9090/app.js!eval:10:12)
    at http://localhost:9090/?:42:21

无法理解错误消息的含义,也找不到定义表单指令的位置。

更新:'undefined' 实际上是一个 'forms' 指令,在 angular2/modules/angular2/src/forms 中确实缺失。然后 DirectiveMetadataReader将 'undefined' 传递给 reflector,最终导致异常。在 Template 中进行检查会很好。


我不太理解这个问题;你提供的文章并不是生产代码,文章明确说明:“(这是建议性API,我们很乐意听取您的意见。)” 这告诉我它不是可用的代码,而是作者想要使用的语法建议。 - Claies
公平地说,除了那个单独的声明之外,文章的其余部分都将其呈现为功能性的工作代码,而不仅仅是一些提议的概念。 - adeelmahmood
你找到这个问题的解决方案了吗? - jumpa
不是的。就我所理解的,它仍然没有完成。至少在构造函数中,angular2/modules/angular2/src/forms/directives.js#ControlDirective.controlOrName被设置为null并且从未更新,这使得_control返回null,然后失败并出现NPE。而且从'angular2/forms'没有任何'forms'导出,但您可以逐个导入所有内容:import {ControlGroupDirective, ControlDirective, CheckboxControlValueAccessor, DefaultValueAccessor} from 'angular2/forms'; - user656449
1个回答

2

看起来 Victor 博客中的例子与您使用的版本不匹配(API 变化非常快)。但是现在 beta 版本已经发布(这意味着不会再有破坏性变化),因此我创建了一个可行的示例,尽可能接近功能:

Angular 2 Beta

import {Component} from 'angular2/core'
import {ControlGroup, FormBuilder, Validators} from 'angular2/common'
...
http://plnkr.co/edit/ae1WEgQJWPMdEgoweMGd?p=preview:仅用于检查其进展情况(已足够远)。
从Angular版本2.0.0-rc.1开始,所有使用angular2的导入需要更改为@angular。
import {Component} from '@angular/core'
import {ControlGroup, FormBuilder, Validators} from '@angular/common';

更多的导入列表请参见这里:


到目前为止,只有Angular2 RC.1而没有RC.2 @OUtlooker - Pardeep Jain
抱歉,我编辑了一下。谢谢@PardeepJain。 - Outlooker

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接