Как добавить API веб-анимации polyfill в проект Angular 2, созданный с помощью Angular CLI

Angular 2 документация по анимации относится к API веб-анимаций polyfill для браузеров, которые не поддерживают собственный.

Каким образом можно добавить этот проект polyfill в проект Angular 2, созданный с помощью Angular CLI?

(Я использую angular -cli: 1.0.0-beta.10)

Не повезло, я пробовал идеи и решения, упомянутые здесь:

Я загрузил его через NPM и добавил его в system-config.ts. Я считаю, что это соответствует тому, что рекомендуется, но polyfill не загружается (я могу сказать, потому что анимация не работает в Safari).

Я только получил это, включив polyfill в index.html, который я знаю, это не так:

  <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

Я добавлю здесь любые детали, которые могут помочь прояснить мой вопрос, но если вам нужно увидеть код, у меня есть его на Github:

https://github.com/cmermingas/connect-four

Спасибо заранее!

Ответы

Ответ 1

Добавление polyfill в новую версию Webpack версии Angular проще:

  • Установить с помощью npm install web-animations-js --save

  • Добавить в polyfills.ts: require('web-animations-js/web-animations.min');

Он также работал, если я делаю import 'web-animations-js/web-animations.min';

Ответ 2

Думаю, вы уже сделали большинство шагов. Просто чтобы сделать это:

1) запустите npm install web-animations-js --save

2) добавьте веб-анимацию-js в angular -cli-build.js, чтобы убедиться, что это пакет поставщика:

return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
       ...
      'web-animations-js/**/*'
    ]
});

3) Настройте system-js (system-config.ts)

/** Map relative paths to URLs. */
const map: any = {
  'web-animations-js': 'vendor/web-animations-js'
};

/** User packages configuration. */
const packages: any = {
  'web-animations-js': {main: 'web-animations.min.js'}
};

Главное, что нам нужно сообщить system-js, что является основным файлом этого пакета. System-js не может получить эту информацию из файла package.json - system-js ожидает, что файл будет index.js. Но это не так. Это веб-анимация .min.js.

4) В файле main.ts добавьте:

import 'web-animations-js';

5) Остановите и перезапустите все процессы, которые используют angular -cli-build.js(ng server, ng test и т.д.).

Теперь система js загрузит web-animation.js polyfill.

Ответ 3

Я просто сделал это с помощью Visual Studio + gulp.

  • Добавьте эту строку в packages.json:

    "web-animations-js": "^2.2.2"

Это обеспечит загрузку пакета в папку node_modules.

  1. Добавьте эту строку в gulpfile.js в массив gulp.src:

    'web-animations-js/web-animations.min.js'

Это гарантирует, что файл будет скопирован в папку libs (или независимо от того, что вы указали) во время каждой сборки gulp.

  1. И вот как вы импортируете его в TypeScript:

    import 'libs/web-animations-js/web-animations.min.js';

Ответ 4

В Angular 4 просто откройте файл polyfils.ts, используйте npm install и импортируйте их - множество примеров уже там.

Для веб-анимации выполняется полифильм:

npm install web-animations-js

И раскомментируйте следующую строку в polyfils.ts

import 'web-animations-js';  // Run `npm install --save web-animations-js`.