Today i got this error on my angular 2 typescript using ionic 2, the error says:

Runtime Error
Uncaught (in promise): TypeError: Cannot read property '2676' of undefined TypeError: Cannot read property '2676' of undefined at Object.eval [as updateRenderer] (ng:///AppModule/QuizPage.ngfactory.js:2349:130) at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/main.js:12997:21) at checkAndUpdateView (http://localhost:8100/build/main.js:12376:14) at callViewAction (http://localhost:8100/build/main.js:12686:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12632:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12377:5) at callWithDebugContext (http://localhost:8100/build/main.js:13359:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/main.js:12899:12) at ViewRef_.detectChanges (http://localhost:8100/build/main.js:10468:63) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43882:40)

 

This error basically says the property questions.options[2676] in the object does not exists, in my case, i was fetching this object from an gethttp JSON data, the issue was that while the data was being fetched from the API server, the script was looking for the object.

 

this has something to do with synchronous and asynchronous in angular. usually the data is asynchronous, the best solution i was able to google was this post:

 

https://stackoverflow.com/questions/37094982/angular2-typeerror-cannot-read-property-id-of-undefined-in-typescript
https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property?rq=1
https://stackoverflow.com/questions/39247362/replacement-of-elvis-operator-of-angular2-in-typescript

 

all these posts mention something very interesting which i did not know about, the Elvis Operator

 

in my case, i didn't have to use it because i was using interpolation in my template however, the object was not ready for the template and that's why i was getting this error.

 

7-6-2014 - UPDATE:

today i ran into this problem one way i was able to resolve it was to put the declarations inside the ngInit(){} function, for example, this is how i was able to resolve an error i was getting because .Questions was undefined in the HTML template: add-questions.ts

ngOnInit() {
    //alert('ngOnInit');

         // assign the first question to the factoryQuestion_ADD as the first question with to be used as the template for the object properties
         this.factoryQuestion_ADD[this.questionId] = this.factoryQuestionRAW[this.quizInfo.QuizQuestionIds[0]];
          // RESET TO BLANK
          this.factoryQuestion_ADD[this.questionId].Question ='';
          this.factoryQuestion_ADD[this.questionId].CorrectAnswerMsg ='';
          this.factoryQuestion_ADD[this.questionId].WrongAnswerMsg ='';
          this.factoryQuestion_ADD[this.questionId].AnswerIds =[];
          this.factoryQuestion_ADD[this.questionId].AnswerIdsOrder =[];
          //this.factoryQuestion_ADD[0].options ={};   
}

 

hope that helps