Import anuglar2 / forms causing "Unable to read property annotations" undefined "

Question

I try to create a simple shape 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 case of failures 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 

I can’t understand what the error message is, and I also can’t find where this directive is defined.

UPDATE: 'undefined' is actually a 'forms' directive, which seems to be really missing from angular2 / modules / angular2 / src / forms. Then DirectiveMetadataReader passes 'undefined' on to the reflector, which ultimately leads to an exception. It would be nice to have a check in the template.

Answer 1

It looks like the example from Victor’s blog didn’t match the version you are using (the API has changed so fast these days). But now a beta version has been released (and that means there are no more changes), so I created a working example with the maximum 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 he went (far enough!).

From Angular Version: 2.0.0-rc.1

All imports that used angular2 must be changed to @angular

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

For more information about the import list, see here: -

• The list of all import updates has been updated to angular2 RC.