Login/Register
Importing anuglar2/forms causing "Cannot read property 'annotations' of undefined"
Asked Answered
javascriptecmascript-6angularatscript
S

1

7

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.

Searle answered 23/3, 2015 at 16:32 Comment(4)
I don't understand this question, exactly; the article you linked isn't production code, the article clearly states "(This is proposed API, we would love to take your input on this.)" This tells me that it's not working code, but a suggestion for syntax the author would like to use. – Janae
to be fair, other than that single statement the rest of the article presents it as functional working code not just some proposed concept – Prosthodontics
did you find a solution for this issue? – Komsomol
No. As far as I can undertand it's still not finished. At least angular2/modules/angular2/src/forms/directives.js#ControlDirective.controlOrName is set to null in constructor and never updated, which makes _control to return null and then fail with NPE. And there is no any 'forms' exported from 'angular2/forms', but you can import all stuff one by one: import {ControlGroupDirective, ControlDirective, CheckboxControlValueAccessor, DefaultValueAccessor} from 'angular2/forms'; – Searle
G
2

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 :-

Gullah answered 16/12, 2015 at 23:22 Comment(2)
till now there is only Angular2 RC.1 not RC.2 @OUtlooker – Mohammedmohammedan
Edited.my bad..tanx @PardeepJain – Haydenhaydn

© 2022 - 2024 — McMap. All rights reserved.