Angular 9 and Storybook: Add @angular/localize/init polyfill

Question

When updating to angular 9 I get the following Storybook error.

Error message from storybook

The error says that I need to add a polyfill for internationalization, but I can't figure out how to.

I need to configure webpack and add the polyfill there, but I am not able to get it to work.

Does anyone know how to fix this?

Cheers

EDIT: To clarify I did I ran the ng add @angular/localize in the angular project.

Nevertheless, Storybook is not picking it up.

This is my polyfills.ts file.

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

Answer 1

TLDR: Adding import '@angular/localize/init'; into config.js or preview.js in the .storybook folder.

Explanation

The issue is that Storybook can't find the polyfill @angular/localize/init. Since Storybook uses webpack to serve Storybook we need to add the polyfill to webpack.

Adding a polyfill to webpack can be done by adding it to the entries array. https://webpack.js.org/guides/shimming/

By looking at this page (https://storybook.js.org/docs/configurations/custom-webpack-config/) you can figure out how to configure storybook to add your polyfill. There is a header here called This is what the config for storybook looks like when using CRA in dev-mode:

If you expand this it shows the default configurations of webpack in storybook. In the entries array, you can see that there is the following line: '<your-storybook-dir>/preview.js'. If you add the polyfill in this file it will be to webpack aswell.

preview.js and config.js are treated as the same file so adding the polyfill to either one of them will do the trick.

Answer 2

You have to install @angular/localize and import '@angular/localize/init' in your polyfills.ts You can also : ng add @angular/localize (install and add to polyfill for you) or import '@angular/localize/init' into the config.js

Answer 3

I changed my operating system because of this problem. And yesterday I found the cause of this problem. I was getting this issue due to a plugin I installed in Visual Studio Code. If you are using Angular9, do not install the first two plugins. You can install the third one.