Angular 8 error - cannot read property 'toString' of undefined

Question

Getting the following error on loading my Angular app.

Not using anything extravagant in the app, but I am using Angular Animations (browseranimationsmodule) and bootstrap for styling. It is hard to trace this back, as the error paths lead to deep code in the browser.js file. I can refresh the app and it will load properly about one of every three tries. The error points to the code lines of 3 different components (the app-person/action/adverb components) randomly. Sometimes one, sometimes another and sometimes it will load fine. These are simple components that don't do much besides store a

that uses string interpolation to display the value. They do however contain the animation states. When the app actually loads, it seems to function properly. Below is the content of one of the components, the other two are nearly identical aside from property names. The code for the app-person component is included and where it is in the app.component.html file. The inconsistency and lack of specific verbiage are throwing me off.

Any insight or starting points for resolution would be much appreciated. I've read similar solutions around using ngDefaultControl and a ton of other stuff...but nothing seems to remedy it. I'm using angular animations, which I suspect may be a part of this issue....but everything was working fine with animations until things got more complex in the app.

Error

 ERROR TypeError: Cannot read property 'toString' of undefined
    at styles.forEach.styleData (browser.js:1493)
    at Array.forEach (<anonymous>)
    at AnimationAstBuilderVisitor._makeStyleAst (browser.js:1475)
    at AnimationAstBuilderVisitor.visitStyle (browser.js:1436)
    at AnimationAstBuilderVisitor.visitState (browser.js:1273)
    at name.toString.split.forEach.n (browser.js:1245)
    at Array.forEach (<anonymous>)
    at metadata.definitions.forEach.def (browser.js:1239)
    at Array.forEach (<anonymous>)
    at AnimationAstBuilderVisitor.visitTrigger (browser.js:1228)

HTML in app.component.html highlighted by error

<div class="row threeItemsRow">

<div class="col-xs-4">
  <app-person [tempPerson]='tempPerson' [personFade]='personFade' [user]='user'></app-person>
</div>
<div class="col-xs-4">
  <app-action [tempAction]='tempAction' [actionFade]='actionFade'></app-action>
</div>
<div class="col-xs-4">
  <app-adverb [tempAdverb]='tempAdverb' [adverbFade]='adverbFade'></app-adverb>
</div>

.ts file for app-person

import { Component, Input, OnInit,AfterViewChecked,HostBinding } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { HttpClient } from '@angular/common/http';
import { getCurrencySymbol } from '@angular/common';

const colors = ['yellow','green','blue','orange','black','red','purple','lightblue','lightgreen'];

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css'],
  animations:[
    trigger('fadeInPerson', [
    state('new',style({
      fontSize:'21px',
      color:colors[Math.floor(Math.random()*10)],
      opacity:0.8,
      textAlign:'center'
    })),
    state('old',style({
      fontSize:'32px',
      color:colors[Math.floor(Math.random()*10)],
      opacity:1.0,
      textAlign:'center'
    })),
    transition('new => old', [
      animate('1s')
    ]),
    transition('old=> new', [
      animate('1s')
    ]),
  ])
  ]
})

export class PersonComponent implements OnInit{

  @Input() tempPerson: string;
  @Input() personFade:any;
  @Input() user:any;
  userNouns:any;

constructor(private http:HttpClient) {}

ngOnInit(){
 }   
}

HTML for app-person

<p [@fadeInPerson]="personFade ? 'new' : 'old'" class="itemText">{{tempPerson}}</p>

CSS for app-person

.itemText{
  font-size:35px;
  transition: 1s linear all;  
  opacity: 1;
}

Answer 1

You should check your:

color:colors[Math.floor(Math.random()*10)]

Due I'm seeing that your array's lenght is 9 not 10 and it can be undefined if the the tenth position is selected, change to:

color:colors[Math.floor(Math.random() * colors.length)]