Angular 4 use ES2017 (e.g. string.prototype.padStart)

Question

I'm using angular 4 and working on a string pipe to pad string with zeros. But angular or vs-code drops errors that the prototype "padStart" does not exist.

1. How to setup this support to my project and / or editor?

2. How to add polyfill if e.g. padStart does not exist?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Perloff

I just added the polyfill to my custom string-pad pipe component. But generally how setup es2017 support? – Perloff

All polyfills are usually added in a single place. The place depends on your setup. Zone.js should be already there. – Manicdepressive

what do you use, angular-cli? – Wordplay

Yes Angular-CLI. I just wondered because all browsers supports padStart Just angulars typescript interface hasn't it. Ok, I could extend the typescript types interface for string prototype methods. – Perloff

Answer 1

In tsconfig.json you need to update the lib to be es2017.

Target (--target)

Specify ECMAScript target version

Lib (--lib)

List of library files to be included in the compilation.

Changing the lib to es2017 pulls in the typings for VSCode, and for compilation you can use polyfills.

Example

{
  "compileOnSave": false,
  "compilerOptions": {

    // ...

    "target": "es2015",

    // ...

    "lib": [
      "dom",
      "es2017" // <-- change to use es2017
    ],
    "paths": { ... }
  }
}

You can find the full list of compiler options in TypeScript's docs

Angular has a bunch of polyfills that are commented out by default in polyfills.ts. You can uncomment what you need and add the dependencies they request using npm or yarn. In your case you only need the string prototype polyfill from ES7.

Pheidippides

This didn't work for me and I don't see how it would, since es2017 is not supported in IE and unless I'm mistaken, if you set the target to es2017 you're not transpiling much and you don't need polyfills either. The target for IE should be es5. – Bowse

@Bowse if you read a bit further down you need to include the polyfills – Pheidippides

@Pheidippides the OP didn't specify which browser throws the error about padStart() and in my case it is IE11, I supposed it was the same for the OP because all other browsers seem to be fine with it. So, setting the target to es2017 will break in IE even if you include the polyfills at the end. You can read why here: https://mcmap.net/q/166317/-what-is-target-in-tsconfig-json-for – Bowse

I realize that. Did you try just adding the polyfills, and not changing the target, but instead changing lib in tsconfig so the runtime has the proper typings to support ES2017? If you set lib to es2017 does that not work? We've added the ES6 and ES7 polyfills in polyfills.ts, and have lib set in our current project to es2017 to support IE11 with no issues. – Pheidippides

@Pheidippides sorry for the late reply. Your solution may work, but it's far from optimal, because if I understand correctly, you're loading all polyfills for ES6 and ES7, which is a substantial addition of unnecessary code just to support one feature of ES7, in this case padStart. – Bowse

@Bowse I'm loading the polyfills I need for the project that I'm working on and didn't feel that I communicated that everything should be added, but if that's not abundantly clear I've updated my answer so there's no confusion that you don't need to add everything. – Pheidippides

Answer 2

Add the following line in your polyfills.ts:

import 'core-js/es7/string';

padStart is part of es2017 (or es7 for short).

Or you can install the mdn-polyfills module and put this line:

import 'mdn-polyfills/String.prototype.padStart';

Bowse

when importing the polyfill to a lib: 2015 and target: ES5 project TypeScript still returns a Property 'padStart' does not exist on type 'string'.. What is the proper way to avoid such an error? From what I understand changing the lib property to es2017 tells my code editor that all es2017 functions are available. This could be dangerous since I only polyfilled string, right? – Reinold

@YannicHamann sorry for the late reply. In my tsconfig.json I have "target": "es5". Which of the 2 solutions that I suggested are you using? If you use mdn-polyfills, you will first have to install them with npm i mdn-polyfills --save. – Bowse

thanks for your reply, I could figure it out already and added a separate answer to the thread. – Reinold

Answer 3

Instead of allowing ALL ES2017 typings as suggested in the accepted answer, do the following to only polyfill the single ES2017.string feature.

1. Add the line import 'core-js/es7/string'; to polyfill.ts
2. Append the library ES2017.string to the lib option (found in tsconfig.json)

The lib option tells the compiler which methods exist (during the runtime). They add no code. That's why we also had to import the actual polyfill. Without the code provided by the polyfill 'old' browsers may throw exceptions.

In my opinion, the current accepted answer may be dangerous as you most likely tend to forget that you would have to polyfill all other features while your code editor/transpiler tells you that ALL other ES2017 typings /features would be available.

Reinold