导入anuglar2 /表单导致“无法读取未定义的”属性“注释” [英] Importing anuglar2/forms causing "Cannot read property 'annotations' of undefined"

问题描述

我正在尝试创建简单的形式，如 http ：//angularjs.blogspot.no/2015/03/forms-in-angular-2.html ，但是当我添加




$ b

$ b

  TypeError：无法读取未定义的属性'annotations'
 
 TypeError：在ReflectionCapabilities.System上无法读取未定义的
的属性'annotations' .register.execute $ __ export.annotations（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / reflection / reflection_capabilities.es6！eval：81：40）
在Reflector.System.register.execute。$ __ export.annotations（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / reflection / reflector.es6！eval：81：50） 
在DirectiveMetadataReader.System.register.execute。$ __ export.read（http：// localhost：9090 / node_module s / 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）
在Array.map（native）
在Function.System.register.execute。$ __export.map（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / facade / collection.es！！eval：172：26）
在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）
在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）
在Zone.run（http：// localhost：9090 / node_modules / zone.js / zone.js：87： 19）
 
 ----- async gap ----- 
在Function.System.register.execute中出错
 $ __ export.then（http：// localhost ：$ 90 $ / $ / $ / $ / $ / $ / $ / $ / $ / $ / $ / $ ：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / core / compiler / compiler.es6！eval：153：42）
在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）
在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 ----- 
错误
在_AsyncInjectorStrategy.System.register.execute._AsyncInjectorStrategy.instantiate（http：// loca lhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / di / inject.es6！eval：297：17）
在Injector.System.register.execute。$ __ export._getByKey http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / di / inject.es6！eval：138：33）
在Injector.System.register.execute。$ __export.asyncGet（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / di / injector.es！！eval：112：25）
 at eval（http： /localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/application.es6!eval:113:39）
 
 -----异步差距 - --- 
错误
在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）
在新的VmTurnZone（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / core / zone / vm_turn_zone.es6！eval：29：34）
在_createVmZone（http：// localhost：9090 / node_modules / angular / dist / js / pr od / es6 / angular2 / src / core / application.es6！eval：101：16）
在bootstrap（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src /core/application.es6!eval:110:16）
在y.main（http：// localhost：9090 / app.js！eval：10：12）
在http：// localhost ：9090 / ?: 42:21 
 
 ----- async gap ----- 
错误
在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）
在新的VmTurnZone（http： /localhost:9090/node_modules/angular/dist/js/prod/es6/angular2/src/core/zone/vm_turn_zone.es6!eval:29:34）
在_createVmZone（http：// localhost：9090 / node_modules / angular / dist / js / prod / es6 / angular2 / src / core / application.es6！eval：101：16）
在引导（http：// localhost：9090 / node_modules / angular / dist / js /prod/es6/angular2/src/core/application.es6!eval:110:16）
在y.main（http：// localhost：9090 / app.js！eval：10：12）
在http：//本地主机：9090 / ?: 42:21 
  

无法理解该错误消息的意思，而我也找不到那个表单指令的定义。

更新：'undefined'实际上是一个'forms'指令，似乎在angular2 / modules / angular2 / src / forms中确实丢失。然后DirectiveMetadataReader将'undefined'进一步传递给反射器，最终导致异常。很高兴有一个模板检查。

解决方案

看起来像维克多博客的例子不符合你的版本使用（API在这些日子里变化如此之快）。但是现在测试版已经发布了（这意味着没有更多的变化），所以我创建了尽可能接近的功能的工作示例：

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的所有进口需要更改为@angle

  import {Component} from'@ angular / core '
 import {ControlGroup，FormBuilder，Validators} from'@ angular / common'; 
  

有关更多导入列表，请参阅： -

• 更新为angular2 RC的所有导入程序列表。

I'm trying to create simple form as described in http://angularjs.blogspot.no/2015/03/forms-in-angular-2.html, but when I add

import {forms, required} from 'angular2/forms';

in crashes with

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

Can't understand what that error message means, and I also can't find where is that forms directive defined.

UPDATE: the 'undefined' is actually a 'forms' directive which seems to be really missing in angular2/modules/angular2/src/forms. Then DirectiveMetadataReader passes the 'undefined' further to reflector which finally results in exception. Would be nice to have a check in Template.

解决方案

It looks like the example from Victor's blog didn't match the version you used (APIs were changing so fast those days). But now beta is released (and it means no more breaking changes) so I've created working example with as close as possible functionality:

Angular 2 Beta

import {Component} from 'angular2/core'
import {ControlGroup, FormBuilder, Validators} from 'angular2/common'
...

http://plnkr.co/edit/ae1WEgQJWPMdEgoweMGd?p=preview just to check how far it went (far enough!).

From Angular version: 2.0.0-rc.1

All imports that were using angular2 need to be changed to @angular

import {Component} from '@angular/core'
import {ControlGroup, FormBuilder, Validators} from '@angular/common';

For more List of imports see here :-

• List of all imports updated to angular2 RC.

这篇关于导入anuglar2 /表单导致“无法读取未定义的”属性“注释”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！