Получается следующая ошибка при загрузке моего Angular приложения.
Я не использую ничего экстравагантного в приложении, но я использую Angular Animations (browseranimationsmodule) и bootstrap для стилизации. Это трудно отследить, поскольку пути ошибок приводят к глубокому коду в файле браузера. js. Я могу обновить sh приложение, и оно будет загружаться примерно с каждой из трех попыток. Ошибка указывает случайным образом на строки кода 3 различных компонентов (компоненты app-person / action / adverb). Иногда один, иногда другой, а иногда он будет нормально загружаться. Это простые компоненты, которые ничего не делают, кроме хранения
, который использует интерполяцию строк для отображения значения. Однако они содержат состояния анимации. Когда приложение действительно загружается, оно работает нормально. Ниже приведено содержимое одного из компонентов, остальные два практически идентичны, кроме имен свойств. Код для компонента app-person включен и где он находится в файле app.component. html. Непоследовательность и отсутствие подробных слов c отбрасывают меня на ноги.
Буду очень признателен за любые идеи или отправные точки для разрешения. Я читал похожие решения с использованием ngDefaultControl и множества других вещей ... но, похоже, ничего не помогло. Я использую angular анимации, которые, как я подозреваю, могут быть частью этой проблемы .... но с анимациями все работало нормально, пока в приложении все не усложнилось.
Ошибка
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 в app.component. html выделено ошибкой
<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 файл для 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 для app-person
<p [@fadeInPerson]="personFade ? 'new' : 'old'" class="itemText">{{tempPerson}}</p>
CSS для app-person
.itemText{
font-size:35px;
transition: 1s linear all;
opacity: 1;
}