Howto: Setup Polyfills in Angular

Angular CLI based projects support polyfills. Here are the steps required to set them up on a newly created project which does not contain them so far:

Create src/polyfills.ts file (file name can be choosen freely)

Include the file in the tsconfig.app.ts and tsconfig.spec.ts configs, e.g.

1
2
3
4
5
6
7
8
{
    "compilerOptions": {
    },
    "files": [
        "src/polyfills.ts",
        "src/main.ts"
    ],
}

Make Angular include the file as a ployfill by adding it to the polyfills section in the angular.json file, e.g.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
   "projects": {
       "architect": {
           "build": {
               "options": {
                   "polyfills": [
                       "src/polyfills.ts",
                       "zone.js"
                   ],
               }
           },
           "test": {
               "options": {
                   "polyfills": [
                       "src/polyfills.ts",
                       "zone.js",
                       "zone.js/testing"
                   ],
               }
           }
       }
   }
}

Those changes did the trick for me. Any code located in the polyfills.ts file was included in the transpiled code and added prior to any other application code.