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

6
更新到 Angular 9 后,我遇到了以下 Storybook 错误。 Storybook 中的错误信息 错误提示说我需要添加国际化的 polyfill,但我不知道该如何添加。
我需要配置 webpack 并在其中添加 polyfill,但我无法使其正常工作。
有人知道如何解决吗?
谢谢!
编辑: 为了澄清,我在 Angular 项目中运行了 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 */

编辑2:

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"
  ]
}

你的错误“字面上”说明:“请从Angular CLI运行ng add @angular/localize。” - Carsten
@Carsten,我在我的Angular应用程序中确实做到了这一点。但这是storybook的错误。 - R. de Ruijter
4个回答

18
TLDR: 在.storybook文件夹中的config.js或preview.js中添加"import '@angular/localize/init';"。
解释: 问题在于Storybook找不到polyfill @angular/localize/init。由于Storybook使用webpack来提供服务,因此我们需要将polyfill添加到webpack中。
通过将polyfill添加到entries数组中,可以将polyfill添加到webpack中。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文件中的import添加到我的每个preview.js storybook文件中(storybook v6)。 - J King
哇,这个评论非常有帮助!错误信息相当具有误导性,因为它会导致另一种解决方案(但并不起作用)。 - dave0688

1
我因为这个问题更换了操作系统。昨天我找到了这个问题的原因。这是由于我在Visual Studio Code中安装的一个插件导致的。如果你正在使用Angular9,请不要安装前两个插件,可以安装第三个插件。

enter image description here


1
你需要安装 @angular/localize 并在 polyfills.ts 文件中引入 '@angular/localize/init'。 你也可以使用 ng add @angular/localize 命令(为您安装并添加到 polyfill 中), 或者将 '@angular/localize/init' 引入到 config.js 文件中。

谢谢您的回复。我已经这样做了,但由于某些原因,Storybook没有捕捉到它。 - R. de Ruijter
我遇到了以下错误:SyntaxError:Cannot use import statement outside a module。该行是在main.ts中唯一的代码。我是否需要在main.ts中添加一些webpack配置? - R. de Ruijter
请提供您的Webpack配置和Tsconfig。 - Caro
在Angular 9中,您的tsconfig应该像https://angular.io/guide/typescript-configuration一样,具有编译器选项“target”:“es2015”,“module”:“esnext”,“moduleResolution”:“node”,“lib”:[ “es2018”, “dom” ]。 - Caro
我会看一下你上面提到的内容。我已经找到了polyfill问题的解决方案。我在config.js中导入了它import '@angular/localize/init'。这解决了问题。感谢你的帮助! - R. de Ruijter
显示剩余5条评论

0
我通过在 package.json 文件中添加以下行来解决了这个问题。
"dependencies": {
 ...
 "@angular/localize": "^10.2.4",
}

然后我运行了:

npm install

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接