Angular 9 и Storybook: добавьте @ angular / localize / init polyfill - PullRequest
0 голосов
/ 26 февраля 2020

При обновлении до angular 9 я получаю следующую ошибку Storybook.

Сообщение об ошибке из сборника рассказов

Ошибка говорит о том, что мне нужно добавить polyfill для интернационализация, но я не могу понять, как это сделать.

Мне нужно настроить веб-пакет и добавить туда полифилл, но я не могу заставить его работать.

Кто-нибудь знает, как это исправить?

Приветствия

РЕДАКТИРОВАТЬ: Чтобы уточнить, я сделал, я запустил ng add @angular/localize в проекте angular.

Тем не менее, сборник рассказов не получает его.

Это мой файл polyfills.ts.

/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es/reflect';

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */
/* https://github.com/aws/aws-amplify/issues/678 fix: */
(window as any).global = window;
/* https://github.com/aws/aws-amplify/issues/678 fix end */

EDIT2:

tsconfig. json

{
  "extends": "../src/tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "node"
    ]
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts",
    "../src/assets/webgl_2019_1/**/*"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

Ответы [ 2 ]

2 голосов
/ 26 февраля 2020

Вы должны установить @ angular / localize и импортировать '@ angular / localize / init' в ваши polyfills.ts. Вы также можете: ng add @ angular / localize (установить и добавить в polyfill для вас) или импортировать '@angular / localize / init 'в конфигурации. js

0 голосов
/ 26 февраля 2020

TLDR: Добавление import '@angular/localize/init в config.js или preview.js в папке .storybook.

Объяснение

Проблема в том, что сборник рассказов не может найти полифилл @angular/localize/init. Поскольку Storybook использует веб-пакет для обслуживания Storybook, нам нужно добавить полизаполнение в веб-пакет.

Добавление полизаполнения в веб-пакет можно сделать, добавив его в массив entries. https://webpack.js.org/guides/shimming/

Просматривая эту страницу (https://storybook.js.org/docs/configurations/custom-webpack-config/), вы можете выяснить, как настроить сборник рассказов для добавления своего полифилла. Здесь есть заголовок, который называется This is what the config for storybook looks like when using CRA in dev-mode:

. Если вы развернете его, он показывает конфигурации веб-пакетов по умолчанию в сборнике рассказов. В массиве записей вы можете видеть следующую строку: '<your-storybook-dir>/preview.js'. Если вы добавите polyfill в этот файл, он будет также упакован.

preview.js и config.js обрабатываются как один и тот же файл, поэтому добавление полизаполнения к любому из них поможет.

...