Проблема с анимацией Angular 5

Я новичок в угловой анимации и в настоящее время следую части руководства по Angular «Вход и выход».

Сейчас у меня есть что-то подобное

<section
  class = "row justify-content-center mb-2 mb-md-4"
  *ngFor = "let site of sites"
  [@flyInOut] = "site.state"
>

...repeatable content

</section>

и в компоненте

import { Component, OnInit } from '@angular/core';
import { SiteService } from '../../Services/site.service';
import { Site } from './site';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

declare const $;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [SiteService ],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})
export class HomeComponent implements OnInit {
  sites: Site[] = [];

  constructor(
    siteService: SiteService,
    public name: string,
    public state: string = 'in'
  ) {
    this.sites = siteService.getSites();
  }

  ngOnInit(): void {
    $(function () {
      $('[data-toggle = "tooltip"]').tooltip();
    });
  }

}

Модуль анимации импортируется в основной модуль.

При загрузке сайта выдает ошибку