Javascript Angular：动画不启动

我想实现一个文本动画如下: https://stackblitz.com/edit/text-animation-demo-with-animejs?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

我把代码复制到我的文件里:

export class HeroSectionMainTextComponent {
  ngAfterViewInit(): void {
    // Wrap every letter in a span
    const textWrapper = document.querySelector('.an-1');
    textWrapper.innerHTML = textWrapper.textContent.replace(
      /\S/g,
      "<span class='letter'>$&</span>",
    );

    anime
      .timeline({ loop: true })
      .add({
        targets: '.an-1 .letter',
        scale: [4, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: 'easeOutExpo',
        duration: 950,
        delay: (el, i) => 70 * i,
      })
      .add({
        targets: '.an-1',
        opacity: 0,
        duration: 1000,
        easing: 'easeOutExpo',
        delay: 1000,
      });
  }
}

但我有一个错误:

TS18047: 'textWrapper' is possibly 'null'.

所以我试着加？像这样:

 const textWrapper = document.querySelector('.an-1');
    textWrapper?.innerHTML = textWrapper?.textContent.replace(
      /\S/g,
      "<span class='letter'>$&</span>",
    );

但没有效果.如何让它工作，为什么在stackblitz上工作？

编辑:

import { Component, AfterViewInit } from '@angular/core';
declare var anime: any; // declare like this
import 'zone.js';

@Component({
  selector: 'app-hero-section-main-text',
  standalone: true,
  imports: [],
  templateUrl: './hero-section-main-text.component.html',
  styleUrl: './hero-section-main-text.component.css',
})
export class HeroSectionMainTextComponent {
  ngAfterViewInit(): void {
    // Wrap every letter in a span
    const textWrapper = document.querySelector('.an-1');
    if (textWrapper) {
      textWrapper.innerHTML =
        textWrapper?.textContent?.replace(
          /\S/g,
          "<span class='letter'>$&</span>",
        ) || '';
    }

    anime
      .timeline({ loop: true })
      .add({
        targets: '.an-1 .letter',
        scale: [4, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: 'easeOutExpo',
        duration: 950,
        delay: (el: any, i: any) => 70 * i,
      })
      .add({
        targets: '.an-1',
        opacity: 0,
        duration: 1000,
        easing: 'easeOutExpo',
        delay: 1000,
      });
  }
}

现在我没有得到任何错误，但动画根本没有开始.