2

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.

andthereitgoes
  • 819
  • 2
  • 10
  • 24
  • did you tried `npm pack --save`? – antzshrek Oct 27 '17 at 00:13
  • what would that do? – andthereitgoes Oct 27 '17 at 07:19
  • it should save the `pack` inside the node_module where your `cwd` is, and it will create a copy of itself in the dependencies for package.json – antzshrek Oct 27 '17 at 07:33
  • I have updated my steps, I am running npm pack in the source folder and installing it in the demo project (different folder path). I am not clear how applying `npm pack --save` on the source folder would help in this case? I have updated the steps in my question to give you a better idea of what I am currently doing. – andthereitgoes Oct 27 '17 at 08:19

3 Answers3

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.

biro
  • 213
  • 2
  • 8
  • For this issue, your solution worked but for the bigger question and considering various different products and team structure, we have decided to go with a private registry. I will add an update to my question. – andthereitgoes Nov 01 '17 at 07:28
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.

danday74
  • 52,471
  • 49
  • 232
  • 283
  • thanks for the recommendation. I will check it out right away. I have also been looking at https://github.com/rlidwka/sinopia, is lerna similar to a 'private repository' such as sinopia? – andthereitgoes Oct 27 '17 at 09:36
  • That-s a nice recommendation. Up! – DanteTheSmith Oct 27 '17 at 09:44
  • sinpopia is not maintained, i wouldnt use it - lerna is not a private repo, it does all the linking locally on your machine without needing to publish. works on windows too (at least it does for me, if any probs on windows you may need to enable symlinking - but prob it will be ok without needing to make any changes). – danday74 Oct 27 '17 at 09:54
  • thanks, I looked into lerna and yarn. really good options but due to our products and team structure it wouldn't work. so have decided to go with private repository. Updated my question – andthereitgoes Nov 01 '17 at 07:30
0

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.
DanteTheSmith
  • 2,937
  • 1
  • 16
  • 31
  • In which folder am I running `npm install package-name`? in the source folder or the demo folder? – andthereitgoes Oct 27 '17 at 08:27
  • Find a folder named node_modules. It already contains other npm modules that came with the demo. NodeJS also has a bit more complex algorithm when you try to require modules. It 1st searches the local folder then goes up the structure then, in the end, searches the global npm repo on your machine. I would put it in closes node_modules folder up the structure to where you intend to use it. If you use the save flags its gets saved in the packages.json file and if you run npm install (without package name) in that folder it will install all packages listed in that json – DanteTheSmith Oct 27 '17 at 08:34
  • Got it, but I am running `npm pack` in the source folder. Does `npm pack` also install it in my local global cache for it to be accessible `via npm install package-name --save`? – andthereitgoes Oct 27 '17 at 08:54
  • Not sure what npm pack does. You can always try it out and check the results either by manually looking into node_modules in search for a package or with running npm list or npm ls . If the tree is big and messy use npm list --depth=0 to list only top-level modules – DanteTheSmith Oct 27 '17 at 09:00
  • Here's what I tried so far. Changed the version (from 2.1.0 to 2.2.0)and ran `npm install -g` on the source folder, which installs the module to my npm_cache with version 2.2.0. In the demo folder, I ran `npm install --save` which is still installing the version 2.1.0 from the npm registry and not the local version. – andthereitgoes Oct 27 '17 at 09:34