Angular 9 和 Storybook：添加 @angular/localize/init polyfill

Posted 2023-02-19

【中文标题】Angular 9 和 Storybook：添加 @angular/localize/init polyfill

【英文标题】：Angular 9 and Storybook: Add @angular/localize/init polyfill

【发布时间】：2020-06-10 02:39:45

【问题描述】：

当更新到 Angular 9 时，我收到以下 Storybook 错误。

Error message from storybook

错误说我需要为国际化添加一个 polyfill，但我不知道如何去做。

我需要配置 webpack 并在那里添加 polyfill，但我无法让它工作。

有谁知道如何解决这个问题？

干杯

编辑： 为了澄清我做了我在角度项目中运行了ng add @angular/localize。

然而，Storybook 并没有接受它。

这是我的 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"
  ]

【问题讨论】：

您的错误literally 状态：Please run ng add @angular/localize from the Angular CLI.

@Carsten 我在我的 Angular 应用程序中做到了这一点。但这是故事书中的错误

【参考方案1】：

因为这个问题，我改变了我的操作系统。昨天我找到了这个问题的原因。由于我在 Visual Studio Code 中安装了一个插件，我遇到了这个问题。如果您使用的是 Angular9，请不要安装前两个插件。您可以安装第三个。

【参考方案2】：

TLDR：将import '@angular/localize/init'; 添加到.storybook 文件夹中的config.js 或preview.js。

说明

问题是 Storybook 找不到 polyfill @angular/localize/init。由于 Storybook 使用 webpack 服务 Storybook，我们需要将 polyfill 添加到 webpack。

向 webpack 添加 polyfill 可以通过将其添加到 entries 数组来完成。 https://webpack.js.org/guides/shimming/

通过查看此页面 (https://storybook.js.org/docs/configurations/custom-webpack-config/)，您可以了解如何配置 storybook 以添加您的 polyfill。这里有一个标题叫This is what the config for storybook looks like when using CRA in dev-mode:

如果你展开它，它会在 storybook 中显示 webpack 的默认配置。在 entries 数组中，您可以看到有以下行： '<your-storybook-dir>/preview.js'。如果你在这个文件中添加 polyfill，它也会被添加到 webpack。

preview.js 和 config.js 被视为同一个文件，因此将 polyfill 添加到其中任何一个都可以解决问题。

【讨论】：

这是正确答案，我必须将通常放入 pollyfill 文件的导入添加到我的每个 preview.js 故事书文件（故事书 v6）中

【参考方案3】：

我通过添加 package.json 这一行来解决这个问题

"dependencies": 
 ...
 "@angular/localize": "^10.2.4",

然后我跑了：

npm install

【参考方案4】：

你必须在你的 polyfills.ts 中安装 @angular/localize 并导入 '@angular/localize/init' 您还可以：ng add @angular/localize（为您安装并添加到 polyfill） 要么 将“@angular/localize/init”导入到 config.js

【讨论】：

感谢您的回复。我这样做了，但出于某种原因，Storybook 没有选择它。

你的 polyfill.ts 是从哪里导入的？我遇到了同样的错误，我将 polyfill 导入到 main.ts 中，它对我有用。

我没有明确地将它导入 Storybook。我相信我必须配置 Storybook 用来获取 polyfill 的 webpack。但我不知道如何...有一些关于如何配置 webpack (storybook.js.org/docs/configurations/custom-webpack-config) 的 Storybook 文档，但没有具体说明

你能分享一下你的 main.ts 是什么样子的吗？

尝试导入“./polyfills”；在 main.ts 中