Encountering a perplexing error upon loading my Angular application.
The app is not utilizing any overly complex features, but it does make use of Angular Animations (BrowserAnimationsModule) and Bootstrap for styling. The source of the error seems to be deeply embedded in the browser.js file, making it difficult to track down. Interestingly, I notice that when I refresh the app, it will load correctly about one out of every three attempts. However, the error randomly points to code lines within 3 different components (app-person/action/adverb). Sometimes it highlights one component, sometimes another, and sometimes it loads without any issues at all. These components are relatively simple, primarily serving as containers for displaying values using string interpolation and containing animation states. Despite the error during loading, once the app successfully loads, everything appears to function properly. Below you'll find the content of one of these components, with the other two being nearly identical. The code for the app-person component is provided along with its placement in the app.component.html file. The inconsistency in the error and lack of specific details have left me puzzled.
If anyone has any insights or starting points for resolving this issue, I would greatly appreciate any assistance. I've come across various suggestions such as using ngDefaultControl and other potential solutions, but so far nothing seems to address the problem. It's worth noting that I suspect Angular Animations may have some role in this issue, especially since everything was functioning smoothly with animations until the complexity of the app increased.
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)
Highlighted HTML in app.component.html due to the 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;
}