6

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

Dominik
  • 429
  • 1
  • 7
  • 14
  • I just added the polyfill to my custom string-pad pipe component. But generally how setup es2017 support? – Dominik Oct 28 '17 at 13:08
  • All polyfills are usually added in a single place. The place depends on your setup. Zone.js should be already there. – Estus Flask Oct 28 '17 at 13:47
  • what do you use, angular-cli? – Max Koretskyi Oct 28 '17 at 15:20
  • 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. – Dominik Nov 23 '17 at 12:05

3 Answers3

6

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.

mtpultz
  • 17,267
  • 22
  • 122
  • 201
  • 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. – AsGoodAsItGets Jan 22 '19 at 15:01
  • @AsGoodAsItGets if you read a bit further down you need to include the polyfills – mtpultz Jan 22 '19 at 17:46
  • @mtpultz 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://stackoverflow.com/a/42429053/134120 – AsGoodAsItGets Jan 23 '19 at 09:29
  • 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. – mtpultz Jan 23 '19 at 18:38
  • @mtpultz 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`. – AsGoodAsItGets Mar 05 '19 at 15:25
  • @AsGoodAsItGets 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. – mtpultz Mar 06 '19 at 00:07
3

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';

AsGoodAsItGets
  • 2,886
  • 34
  • 49
  • 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? – Yannic Hamann May 22 '19 at 06:14
  • @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`. – AsGoodAsItGets Jun 11 '19 at 15:58
  • thanks for your reply, I could figure it out already and added a separate answer to the thread. – Yannic Hamann Jun 12 '19 at 02:11
1

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.

Yannic Hamann
  • 4,655
  • 32
  • 50