28

I made some custom modifications in the ngx-mask package and need to test it locally.

How to overwrite the installed npm package?

Currently the package is declared as a dependency in packages.json file as:

"ngx-mask": "^7.8.9"

I do prefer not to fork the original package and not to use github for this, if possible.

Beetlejuice
  • 4,292
  • 10
  • 58
  • 84
  • The package files must be present inside your node_modules folder. Go and edit them their. – Obaid Apr 07 '19 at 15:54
  • @Obaid Since Angular 13, there is a caching for the node_modules. Editing files there will cause problems with the cache. – JSON Derulo May 17 '23 at 08:10

3 Answers3

67

If you have made these changes on your machine. (I'm assuming you have)

  1. Run a build of the ngx-mask package that you changed.

  2. run npm pack from that package's root folder. This creates a .tgz zip file of your package with your custom modifications.

  3. copy that file into the root (you could put it wherever but root makes things easy) of your project.

  4. in your package.json replace the version number ngx mask to the following "ngx-mask": "file:my-packed-file.tgz"

  5. Run an npm install using your new package.json

you should have your modified copy loaded in as a dependency in node_modules.

James
  • 2,516
  • 2
  • 19
  • 31
  • Run a build means "npm run build" ? This give me the error "npm ERR! missing script: build" – Beetlejuice Apr 07 '19 at 16:08
  • "ng build" create the "dist" folder, but "npm pack" then gives the error "npm ERR! Could not install from "" as it does not contain a package.json file." – Beetlejuice Apr 07 '19 at 16:10
  • So I'm assuming that you've cloned the `ngx-mask` package. If you see inside it's `package.json` then it has no `build` script. Instead it is `"build:library": "ng-packagr -p package.json"` Try `npm run build:library` when you're in that project's root :) – James Apr 07 '19 at 16:11
  • 1
    Does this work the same way `npm link` ? – oskrgg Apr 14 '21 at 17:47
  • So I have to do this every time I make a change in the dependency ? Just pointing the dependency in `package.json` to the local folder doesn't work ? – EllipsenPark Dec 07 '21 at 16:00
  • 3
    `npm pack` should not be run from the `dist` folder, that's wrong. – Nikola Mihajlović Dec 19 '21 at 03:28
  • as the person above mentioned `npm pack` should be run in the parent folder and not the dist folder. – Alex Mar 16 '22 at 15:12
  • 1
    I have edited my answer to change that point @Alex @ Nikola – James Mar 16 '22 at 15:18
  • @James So what's the point of `Step: 2`? – Sumit Ridhal May 12 '22 at 15:07
  • 1
    Quite right, I have removed that and clarified the `npm pack` step. @SumitRidhal – James May 12 '22 at 16:27
22

The 'npm link' command was made for this.

In your test repo (where you use the ngx-mask package) run:

npm link /path/to/your/locally/modified/ngx-mask/package

This will install your locally modified ngx-mask into your test repo.

When you are done testing your local version of the ngx-mask package, you can simply unlink it. To unlink the local version of ngx-mask, in your test repo run:

npm unlink --no-save /path/to/your/locally/modified/ngx-mask/package

If you want to re-install the registry version of the ngx-mask package run:

npm install
rouble
  • 16,364
  • 16
  • 107
  • 102
  • 1
    One small caveat I had to first uninstall (`npm uninstall `) the target package I wanted to link from because it was already being used in my test repo (where I use such package) - I guess `npm link /path/to/your/locally/modified/ngx-mask/package` will skip if the package already there. Other than that the steps outlined above worked great. Thanks. – Jose Quijada Mar 24 '21 at 17:49
  • So wait, what's the order here ? First run `npm-install` for all the other dependencies, THEN `npm link` to supersede the packages from the registry with the local ones ? – EllipsenPark Dec 07 '21 at 16:15
  • 1
    @JoseQuijada the linked package should be respected above the package in your test repo as far as I know. – AdamJB Dec 22 '21 at 14:27
1

'npm install'

npm link should be avoided because of different bad behaviours. Read this blog-article for more informations https://hirok.io/posts/avoid-npm-link

Here is an alternative with npm install:

  1. Build your ngx-mask project. You should have a dist-folder after that.
  2. Add ngx-mask to the dependencies of your test-project. Use the current version of package.json of ngx-mask.
  3. Run npm install --no-save /path/to/ngx-mask/dist

If you have multiple packages, then you have add them with one command.

# good
~ npm i --no-save /path/packageA/dist /path/packageB/dist

# not good
~ npm i --no-save /path/packageA/dist
~ npm i --no-save /path/packageB/dist
akop
  • 5,981
  • 6
  • 24
  • 51