Не удается импортировать AnimeJS в ионно-угловой проект - PullRequest
Новая
       8

Не удается импортировать AnimeJS в ионно-угловой проект

0 голосов
/ 18 марта 2019

Я установил AnimeJS со следующими командами в моем проекте Ionic 4: 

npm i animejs --save
npm i @types/animejs --save

Затем я попытался сослаться на него с помощью: 

import * as anime from 'animejs'

Выполнение вышеизложенного дает мнеследующая ошибка при вызове чего-либо из animejs:

Ошибка: Uncaught (в обещании): TypeError: Объект не является функцией (рядом с '... animejs__WEBPACK_IMPORTED_MODULE_1 __...')

Однако, если я импортирую, ссылаясь на anime.js в каталоге node_modules, все будет работать так, как ожидалось.Я подумал, установив @types/animejs, это позволило бы мне использовать просто import * as anime from 'animejs' без прямой ссылки на файл в каталоге node_modules.

Почему я могу импортировать, используя папку node_modules, но не import * as anime from 'animejs'

После импорта я называю это так: 

  openModal(modalPage) {
    // Define modal to open
    switch (modalPage) {
      case 'login' : {
        modalPage = LoginPage;
        break;
      }
      case 'register' : {
        modalPage = RegisterPage;
        break;
      }
    }

    // Open modal
    this.modalCtrl.create({
      component: modalPage,
      cssClass: 'intro-modal',
      showBackdrop: true,
      enterAnimation: this.animations.modalEnter
    }).then(modal => {
      // Hide intro buttons
      anime({
        targets: ['.intro-buttons'],
        translateX: '-100%',
        duration: 150,
        easing: 'linear'
      });

      // Animate slide back
      modal.onWillDismiss().then(() => {
        anime({
          targets: ['.intro-buttons'],
          translateX: '0%',
          duration: 150,
          easing: 'linear'
        });
      });

      // Present the modal
      modal.present();
    });
  }

1 Ответ

1 голос
/ 18 марта 2019

Обновите ваш импорт следующим образом: 

import anime from 'animejs'

Это импортирует экспорт default из animejs, который на самом деле является функцией, принимающей параметры / объект, которые вы пытаетесь передать.

Вот пример в действии, показывающий импорт и передачу ожидаемого объекта в anime() без запуска ошибки.

При существующем импорте * as anime, если выlog anime, вы увидите свойство default того объекта, которое является реальной функцией, которая вам нужна.Также вы увидите, что импорт включает в себя различные другие свойства / функции, включая penner, stagger и timeline.Вы просто указали неправильное свойство при предыдущем импорте.

Надеюсь, это поможет!

...