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

Question

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

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

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

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

• https://github.com/angular/angular-cli/issues/949
• https://github.com/angular/angular-cli/issues/1015
• https://github.com/angular/angular-cli/issues/718

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

Я только получил это, чтобы включить полифилл в 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

Заранее спасибо!

Answer 1

Angular 6 Note - Polyfill больше не требуется:-)

Улучшения производительности анимации

Мы обновили нашу реализацию анимации, чтобы больше не нуждаться в полифиле веб-анимации. Это означает, что вы можете удалить этот polyfill из вашего приложения и сохранить примерно 47 КБ размера пакета, одновременно увеличивая производительность анимации в Safari.

:-)

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Answer 2

Добавить polyfill с более новой версией Angular CLI в Webpack проще:

1. Установить с npm install web-animations-js --save

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

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

Answer 3

В Angular 4 просто выполните следующие шаги:

1. добавить web-animations-js в качестве зависимости:

   npm установить web-animations-js

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

   импортировать 'web-animations-js'; // Бежать npm install --save web-animations-js,

Answer 4

Я только что сделал это с Visual Studio + gulp.

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

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

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

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

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

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

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

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

Answer 5

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

1) запустить npm установить web-animations-js --save

2) добавьте web-animation-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. Но это не так. Это web-animations.min.js.

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

import 'web-animations-js';

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

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

Answer 6

Вы можете выполнить следующие 3 шага:

1- Запустите эту команду: npm i -D web-animations-js

2- Добавьте эти строки кода в файл «angular.json».

      {
...
"projects:" {
  ...
  "architect": {
    ....
    "build": {
      ...
      "scripts": [
              {
                "input": "node_modules/web-animations-js/web-animations.min.js",
                "inject": false,
                "bundleName": "web-animations-js"
              }
            ],

В-третьих, добавьте эти строки кода в файл «ployfills.ts».

      if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'web-animations-js.js';
  document.head.appendChild(script);
}

Обратите внимание, что я заключил код в оператор if , потому что этот код создаст проблему на старых устройствах iOS, обычно на iPhone 6 с iOS 12.