Adding global prototype function in TypeScript (Angular) causes error

Question

I am trying to add a global prototype function to my Angular-App, but it throws an error during compilation:

./src/app/helpers/functions.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: \src\app\helpers\functions.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at \node_modules\@ngtools\webpack\src\ivy\loader.js:59:26

I import the file in the app/app.module.ts the following way (1st line):

import './helpers/functions.ts';

Object.prototype.clone = clone;
Array.prototype.clone = clone;

declare global {
  interface Array {
    clone(): typeof clone;
  }

  interface Object {
    clone(): typeof clone;
  }
}

function clone() {
  // creates deep copy of "this"
}

Maybe someone has an idea how to solve this? I appreciate your help!

Did you "...make sure it is in your tsconfig via the 'files' or 'include' property." ? — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2022 at 9:48
Side note: Beware that if you extend Object.prototype or Array.prototype via direct assignment like that, it creates an enumerable property, which will break lots of code that expects objects inheriting from those not to have any enumerable properties. Some would say never extend those prototypes at all, but if you're going to, use Object.defineProperty with the default enumerable flag (which is false), so that the property isn't enumerable. But I'd be surprised... — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2022 at 9:53
...if you don't run into a conflict with the name clone. If you don't know that none of the 3rd party code you're using has a clone property on an object somewhere, you're really better off just using a utility function you pass the object into. :-) — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2022 at 9:53
Thank you, @T.J.Crowder. It worked after I changed it in the tsconfig.app.json, but your notes became true after the prototype function was imported. So I will just export a clone-function :) — Kevin Glier
– Kevin Glier, Commented Feb 23, 2022 at 10:36

Kevin Glier · Accepted Answer · 2022-02-23 10:35:23Z

3

I found the solution now. It didn't work with files or include in the tsconfig.json.

Because the project was created using the angular-cli, there is a seperate tsconfig.app.json-file.

Just change it like this:

{
  ...
  "files": [
    ...
    "src/app/helpers/functions.ts"
  ],
  :::
}

As T.J. Crowder was pointing out in his comments to my question: Don't extend the Object or Array type like shown in my question. After the import of my function worked, I ran into the problems he described. Many custom libraries caused errors or weren't working the way they should. This was still the case after changing the property name to something else than clone(). So I am not gonna use the extension way but exported helpers functions.

Thank you for the notes!

answered Feb 23, 2022 at 10:35

Kevin Glier

1,4062 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding global prototype function in TypeScript (Angular) causes error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related