How to install an npm package locally

Question

I have downloaded the following demo and ng2-archwizard

I would like to make changes to make local change to the source for ng2-archwizard and install the package locally for this demo project.

The first thing that I tried was npm link by following these steps

1. Inside ng2-archwizard I made code changes and ran npm link
2. Inside the demo project I installed ng2-archwizard using npm link \\path\\to\\ng2-archwizard or just npm link ng2-archwizard
3. When I run ng serve I get the following error

chunk {0} main.bundle.js, main.bundle.js.map (main) 984 kB {4} [initial] [rendered]

chunk {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 191 kB {5} [initial] [rendered]

chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 175 kB {5} [initial] [rendered]

chunk {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 168 kB {5} [initial] [rendered]

chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.83 MB [initial] [rendered]

chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /usr/xxx/ng2-archwizard-demo/node_modules/ng2-archwizard/node_modules/@angular/core/core.d.ts, resolving symbol ArchwizardModule in /usr/xxx/ng2-archwizard-demo/node_modules/ng2-archwizard/dist/archwizard.module.d.ts, resolving symbol ArchwizardModule in /usr/xxx/ng2-archwizard-demo/node_modules/ng2-archwizard/dist/archwizard.module.d.ts

Then I tried npm pack to create a tar and install that tar in the demo project and it works as a short-term solution.

Update 1 1. Inside ng2-archwizard I made code changes and ran npm pack 2. Inside the demo project I installed ng2-archwizard using npm install \\path\\to\\ng2-archwizard.tar or npm install \\path\\to\\ng2-archwizard.tar --save (which saves the dependancy to the package.json of the demo project) 3. Run ng serve 4. When I have to make any changes again to the code, I have to repeat the above three steps again with additional steps of clearing cache, uninstalling the tar etc.

For a sustainable build process, how can I install the package locally and have my changes reflected in the demo project using npm link?

Update 2

Due to our products and team structure, have decided to go with a private repository as a more sustainable scalable solution across different teams. Sinopia is not maintained but found two that are maintained and work Verdaccio - A maintained fork of sinopia and cnpm .

Answer 1

I highly recommend using npm lerna package for this issue.

It is used by all the big boys, babel, etc

It basically allows you to very easily link unpublished packages with lerna bootstrap command and to publish them as individual npm modules using lerna publish

Also does automatic versioning and git tagging for you as a bonus.

The docs take a while to get your head around - took me about an hour or so playing with it to get the idea - but its really great when you get going. Highly recommended.

Answer 2

You're nearly there. What you need to do is the following:

1. build ng2-archwizard locally with npm i followed by npm run build
2. run npm i --save path/to/ng2-archwizard inside your custom project repository ( ng2-archwizard-demo )
3. delete the node_modules folder inside your ng2-archwizard folder. This folder is responsible for the ERROR message you see in your terminal

After following these three steps you should be able to get ng2-archwizard-demo running via ng serve .

Answer 3

From NPM docs:

If you want to depend on the package from your own module using something like Node.js' require, then you want to install locally, which is npm install's default behavior. On the other hand, if you want to use it as a command line tool, something like the grunt CLI, then you want to install it globally

So it's as simple as:

npm install package-name

Since its the DEFAULT behavior (you can use flag -g for global).

You probably wanna also use one of the two:

• --save-dev is used to save the package for development purpose. Example: unit tests, minification..
• --save is used to save the package required for the application to run.