Угловой 6 Progress Bar Circle Не работает

Question

У меня есть модуль с дочерними компонентами.
Модуль 1

Модуль> Ребенок 1 + Ребенок 2

У ребенка 2 есть 4 дочерних компонента.

Ребенок 2> Под дочерний ребенок 1 + Под дочерний ребенок 2 + Под дочерний ребенок 3 + Под дочерний ребенок 4

SubChild1 имеет форму и круговой индикатор выполнения html, как показано ниже, этот раздел отображается только в том случае, если showOnlyPercentage имеет значение true. Сделать круг - это функция для возврата настроек параметров.

<div class="circle-container" *ngIf="showOnlyPercentage">
<ks-circle-progress [options]="makeCircleShape()"></ks-circle-progress>
<p class="someClass">{{someVariable}}%</p>

Файл Typescript для SubChild1

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ShapeOptions, LineProgressComponent, CircleProgressComponent, SemiCircleProgressComponent } from 'angular2-progressbar';
import { CircleService } from '../../../../services/shapes/circle.service';
@Component({
 selector: 'app-section-b',
 templateUrl: './subChild1.component.html',
 styleUrls: ['./subChild1.component.scss']
})
export class SubChild1 implements OnInit {

  showOnlyPercentage = false;
  performancePercentage = 30;
  @ViewChild(CircleProgressComponent) circleComp: CircleProgressComponent;
  constructor(private _circleServie: CircleService) { }

  ngOnInit() {
  }

  makeCircleShape() {
    const circleOptions = this._circleServie.circleShape();
    return circleOptions;
  }

}

CircleService предназначен только для настройки параметров круга.

Теперь этот компонент импортируется в компонент «Дочерний 1» с кодом ниже

@ViewChild(SubChild1) subChild1: SubChild1;

Для свойства subChild1 showOnlyPercentage установлено значение true, поэтому мы можем видеть progressBar

ngOnInit() {
  this.subChild1.showOnlyPercentage = true;
}
 ngAfterViewInit() {
    this.subChild1.performancePercentage = 90;
this.subChild1.circleComp.animate(.9);
 }

Импорт для модуля следующий:

@NgModule({
imports: [
SharedModule,
ProgressBarModule
],
declarations: [Child2,SubChild1,SubChild2,SubChild3,SubChild4,Child1],
})

Точно так же, как SubChild1 используется в Child1, я использую другие SubChild2, SubChild3, SubChild4 в компоненте Child1. Код для импорта и использования такой же, как показано выше для SubChild1. Когда я использую функцию animate в ngAfterViewInit () для всех SubChildren, 3 из них работают просто отлично. Но один из SubChildren дает проблемы. В консоли у нас есть ошибка:

Child1.html: 22 ОШИБКА TypeError: Невозможно прочитать свойство 'animate' из неопределенного

Это происходит только для 1 из подчиненных детей, а остальные 3 работают нормально.
Примечание. Если неиспользуемый SubChild при использовании метода animate находится над другими SubChildren, все компоненты перестают работать. Это означает, что SubChildren ниже проблемного SubChild не работают. Когда поставлен перед проблемным SubChild, все 3 других SubChildren работают нормально