35

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.

Improve this question
2
  • The package files must be present inside your node_modules folder. Go and edit them their. Commented Apr 7, 2019 at 15:54
  • @Obaid Since Angular 13, there is a caching for the node_modules. Editing files there will cause problems with the cache. Commented May 17, 2023 at 8:10

3 Answers 3

Reset to default
79

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.

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

10 Comments

Run a build means "npm run build" ? This give me the error "npm ERR! missing script: build"
Does this work the same way npm link ?
npm pack should not be run from the dist folder, that's wrong.
I have edited my answer to change that point @Alex @ Nikola
Quite right, I have removed that and clarified the npm pack step. @SumitRidhal
|
26

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
Improve this answer

3 Comments

One small caveat I had to first uninstall (npm uninstall <target-package-name>) 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.
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 ?
@JoseQuijada the linked package should be respected above the package in your test repo as far as I know.
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
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.