IE 11 синтаксическая ошибка скрипта в Storybook 5.3. + И Angular 9.1 - PullRequest
Новая
       22

IE 11 синтаксическая ошибка скрипта в Storybook 5.3. + И Angular 9.1

0 голосов
/ 07 мая 2020

Storybook работает с вечнозелеными браузерами, а компоненты angular работают в отдельном приложении angular nwrl в IE11

Пример истории 

export const ctaPill = () => ({
  template: `
    <button cta-pill class=”primary" >{{ text }}</button>
  `,
  props: {
    text: text('Button text', 'CTA Pill'),
  },
});

In IE 11 приведенное выше приводит к синтаксической ошибке в строке 'export const ctaPill'

Попробовали 2 метода заставить сборник рассказов работать в IE 11, но каждый из них вызывает другую ошибку - я думаю, что я мне не хватает полифилла или некоторых модулей @babel - я ищу исправление или обходное решение, которое мне не хватает.

Метод 1 - нацелить на es5 в tsconfig. json

tsconfig. json конфигурация 

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5"
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@europe-core/ui": ["libs/ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"],
  "include": ["**/*.ts", "**/*.d.ts"]
}

В консоли ошибок не возникает, но шаблоны не интерполируются, и директива не разрешается

Пример не распознает директиву и визуально интерполирует {{text}} к {CTA Pill {CTA PILL CTA PILL CTA PILL} CTA PILL}

Метод 2 - конфигурация Webpack

Обновите .storybook / webpack.config. js включить de babel-loader 

config.module.rules.push({
    test: /\.[t|j]s$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
          ],
          '@babel/preset-typescript',
          '@babel/preset-react',
          '@babel/preset-flow',
        ],
        plugins: [
          [require('@babel/plugin-proposal-decorators'), { legacy: true }],
          [require('@babel/plugin-proposal-class-properties'), { loose: true }],
          require('@babel/plugin-proposal-export-default-from'),
          require('@babel/plugin-syntax-dynamic-import'),
          [
            require('@babel/plugin-proposal-object-rest-spread'),
            { loose: true, useBuiltIns: true },
          ],
          require('babel-plugin-macros'),
          // ['emotion', { sourceMap: true, autoLabel: true }],
        ],
      },
    },
  });

Однако это вызывает другую ошибку (во всех браузерах) из-за внедрения зависимости службы значков, которая сообщает 

Error: Can't resolve all parameters for IconService: (?, ?).

Удаление зависимости заставляет сборник рассказов работать, но не может внедрять зависимости.

...