Error when trying to reference a github repository - node.js

I am using angular 2 and I am trying to reference a github repo directly instead of an npm package in order to debug but the project does not compile.
In my packages.json I changed "primeng": "4.2.2", with "primeng": "git+https://github.com/primefaces/primeng.git"
When I build I get following errors
ERROR in multi ./node_modules/simple-line-icons/css/simple-line-icons.css ./node_modules/font-awesome/css/font-awesome.css ./node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css ./node_modules/bootstrap-select/dist/css/bootstrap-select.css ./node_modules/jquery.uniform/dist/css/default.css ./node_modules/toastr/build/toastr.css ./node_modules/sweetalert/dist/sweetalert.css ./node_modules/jstree/dist/themes/default/style.min.css ./node_modules/jtable/lib/themes/metro/blue/jtable.min.css ./node_modules/morris.js/morris.css ./node_modules/bootstrap-daterangepicker/daterangepicker.css ./node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css ./src/app/shared/core.less ./src/app/shared/layout/layout.less ./src/assets/bootstrap-datepicker/css/bootstrap-datepicker.min.css ./node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css ./src/styles.css ./src/fonts.css ./src/Test-palette.css ./src/app/risk-management/styles/module-styles.css ./src/primeng-chips.css ./src/primeng-datatable.css ./src/primeng-multiselect.css ./src/primeng-sidebar.css ./src/animations.css ./node_modules/primeng/resources/primeng.min.css ./node_modules/primeng/resources/themes/redmond/theme.css ./node_modules/#angular/material/prebuilt-themes/indigo-pink.css ./node_modules/loaders.css/loaders.min.css
Module not found: Error: Can't resolve 'C:\SourceControl\Test\TestProject\src\TestProject.Client\node_modules\primeng\resources\primeng.min.css'
When I check the node modules/primeng I only see these files:
What am I doing wrong?

NPM primeng package was built for distribution and has resources directory, while Github repository contains only source files. This is very common among NPM packages.
Since Github repo source is used for the purpose of debugging, the solution is to build the package manually. Considering that resources are built with Gulp and not generic NPM build script, it should be something like:
cd ./node_modules/primeng
npm i
gulp build-assets

You do not need the github.com prefix there, this should be enough:
"primeng": "primefaces/primeng"
More about this here: https://docs.npmjs.com/files/package.json#github-urls
Problem is that the resources folder is ignore via .gitignore. There is a gulpfile.js, that is responsible for creating it. You could run that manually if you want to use github version directly.
https://github.com/primefaces/primeng/blob/master/gulpfile.js

Related

npm-install: Why is there a difference between a "<name>" and a "git-repo-url" package installation for the code?

Goal:
I want to install a special commit of a package.
Problem: After installing a package using a GitHub-Url, the code in the node_module folder was significantly different from a normal installation. (This caused webpack to generate error messages, which was not the case with a normal installation.)
Question: Is there any way that the code from GitHub is created and perform in the same way (e.g., structure and layout) as after a normal installation?
Test scenario:
Normal installation:
npm install jquery
GitHub installation:
npm install git+https://git#github.com/jquery/jquery.git
results:
+.github
+src
...
package.json
detailed results with github
+dist
+external
+src
...
package.json
detailed results without github

How to modify an npm package built with TypeScript

I want to try and make some changes to a package published in npm? (I've suggest some changes as an issue but I think they are simple enough for me to attempt them).
https://www.npmjs.com/package/bt-presence#contributing--modifying
The author supplies some information on how to modify the package, but not really enough for someone doing it for the first time.
Where should I clone the GitHub repo to? The folder where the package is installed? I tried it in my home folder and that would not build (unmodified).
The command npm run build - where is this run from? The root folder of the package where the package.json is?
Will I need to modify the package.json?
In general what is the best way to develop something like this for npm? I've worked on packages before but they were simply Javascript.
If you want to work on the bt-presence package in isolation, you can put the cloned repository anywhere. If you want to use your modified version of bt-presence in combination with an application, my recommended approach is to register bt-presence as a dependency in the application's package.json file with the version set to a relative path to your bt-presence repository; then running npm install in the application will make a symlink from node_modules/bt-presence in the application to your bt-presence repository.
npm run build should indeed be run from the root folder that contains the package.json of bt-presence.
If you just want to change the code of bt-presence, you won't need to modify its package.json. You would only modify the package.json if you need to change any of the settings in there, e.g, if you need to add additional dependencies to your version of bt-presence.
None of the above is really specific to TypeScript. (Some JavaScript packages have build processes too if they need to transform or package the JavaScript files in some way.)

How to use fork version of npm package in a project

Let's say there is an npm package called abcd.
Normally in package.json, we specified the dependencies as
"abcd": "^1.0.0",
But this abcd does not work as expected, so I forked (and modified) it inside https://github.com/mygithubid/abcd
Then I run npm install git+https://git#github.com/mygithubid/abcd.git and in package.json, the definition is changed to
"abcd": "git+https://github.com/mygithubid/abcd.git",
After restarting the project that using this abcd, now it throws error
Module not found: Can't resolve 'abcd'
... even though I saw the abcd folder is added inside node_modules
Could you advise the mistake I made in above? Thanks!
One fairly clean option is to use patch-package:
https://www.npmjs.com/package/patch-package
If the people using your project might use either npm or yarn, then remeber to make the patch available for both. More info under patch-package --use-yarn.
Patch or fork? See https://www.npmjs.com/package/patch-package#benefits-of-patching-over-forking
Be sure that the github repository contains compiled files, at most cases you need build the package for npm first, the compiled files push only to NPM.
To find out how to build the package check the package.json file

Download node module sources without installing them?

I would like to download node module packages (listed in a package.json file, in the present working directory) source code to a node_modules subdirectory of the present working directory, without compiling, or installing those modules. Now I have seen the related question download source from npm without npm install xxx but that question dealt with downloading the source code of individual modules specified to NPM directly (i.e., without using a package.json file). The reason why I want to do this is because I am working on developing an Atom package for the Open Build Service (OBS) of openSUSE and this seems like one of the necessary steps I need to go through in order to achieve this.
The source code is not shipped with the npm distributed code. The best you could do is read the package.json and look for the { repository: url { } } key if it exists and if it's a git repo (which most of them will be) clone it.
However be aware that the source code often requires a build step before it can be used, as in an npm prepublish step defined in the source code. In modern Javascript projects a common example of this is transpiling ES6 code to ES5 code for use in NodeJS and the browser.
I have not made an Atom package but I'm fairly certain you don't need to do any of this.

npm install from Git in a specific version

Assumed that I have written a module for Node.js which I would like to keep private. I know that I can (should) add the line:
"private": "true"
to the package.json file, and I also know that I can npm install this module using a file system path or a link to a git repository, including GitHub.
I also know that I can put such a file system path or a link to a git repo into package.json, so that the dependencies part may look somewhat like this:
"dependencies": {
"myprivatemodule": "git#github.com:..."
}
What I now want is not to link to the latest version, but to a specific one. The only possibility I know of is to link to a specific commit using its ID. But this is way less readable and worse maintainable than using a version number such as 0.3.1.
So my question is: Is it possible to specify such a version number anyway and make npm search the git repository for the latest commit that includes this version?
If not, how do you resolve this issue in your projects? Do you live with commit IDs or is there a better solution to this?
The accepted answer did not work for me.
Here's what I'm doing to pull a package from github:
npm install --save "git://github.com/username/package.git#commit"
Or adding it manually on package.json:
"dependencies": {
"package": "git://github.com/username/package.git#commit"
}
Here's the full npm documentation:
https://docs.npmjs.com/cli/v9/configuring-npm/package-json?v=true#git-urls-as-dependencies
A dependency has to be available from the registry to be installed just by specifying a version descriptor.
You can certainly create and use your own registry instead of registry.npmjs.org if your projects shouldn't be shared publicly.
But, if it's not in a registry, it'll have to be referenced by URL or Git URL. To specify a version with a Git URL, include an appropriate <commit-ish>, such as a tag, at the end as a URL fragment.
Example, for a tag named 0.3.1:
"dependencies": {
"myprivatemodule": "git#github.com:...#0.3.1"
}
Note: The above snippet shows the base URL the same as it was posted in the question.
The snipped portion (...) should be filled in:
"myprivatemodule": "git#github.com:{owner}/{project}.git#0.3.1"
And, a different address format will be needed when SSH access isn't available:
"myprivatemodule": "git://github.com/{owner}/{project}.git#0.3.1"
Depending on your OS, you may also be able to link to the dependency in another folder where you have it cloned from Github.
If by version you mean a tag or a release, then github provides download links for those. For example, if I want to install fetch version 0.3.2 (it is not available on npm), then I add to my package.json under dependencies:
"fetch": "https://github.com/github/fetch/archive/v0.3.2.tar.gz",
The only disadvantage when compared with the commit hash approach is that a hash is guaranteed not to represent changed code, whereas a tag could be replaced. Thankfully this rarely happens.
Update:
These days the approach I use is the compact notation for a GitHub served dependency:
"dependencies": {
"package": "github:username/package#commit"
}
Where commit can be anything commitish, like a tag. In the case of GitHub you can even drop the initial github: since it's the default.
This command installs npm package username/package from specific git commit:
npm install https://github.com/username/package#3d0a21cc
Here 3d0a21cc is first 8 characters of commit hash.
My example comment to #qubyte above got chopped, so here's something that's easier to read...
The method #surjikal described above works for branch commits, but it didn't work for a tree commit I was trying include.
The archive mode also works for commits. For example, fetch # a2fbf83
npm:
npm install https://github.com/github/fetch/archive/a2fbf834773b8dc20eef83bb53d081863d3fc87f.tar.gz
yarn:
yarn add https://github.com/github/fetch/archive/a2fbf834773b8dc20eef83bb53d081863d3fc87f.tar.gz
format:
https://github.com/<owner>/<repo>/archive/<commit-id>.tar.gz
Here's the tree commit that required the /archive/ mode:
yarn add https://github.com/vuejs/vuex/archive/c3626f779b8ea902789dd1c4417cb7d7ef09b557.tar.gz
for the related vuex commit
I needed to run two versions of tfjs-core and found that both needed to be built after being installed.
package.json:
"dependencies": {
"tfjs-core-0.14.3": "git://github.com/tensorflow/tfjs-core#bb0a830b3bda1461327f083ceb3f889117209db2",
"tfjs-core-1.1.0": "git://github.com/tensorflow/tfjs-core#220660ed8b9a252f9d0847a4f4e3c76ba5188669"
}
Then:
cd node_modules/tfjs-core-0.14.3 && yarn install && yarn build-npm && cd ../../
cd node_modules/tfjs-core-1.1.0 && yarn install && yarn build-npm && cd ../../
And finally, to use the libraries:
import * as tf0143 from '../node_modules/tfjs-core-0.14.3/dist/tf-core.min.js';
import * as tf110 from '../node_modules/tfjs-core-1.1.0/dist/tf-core.min.js';
This worked great but is most certainly #hoodrat
I describe here a problem that I faced when run npm install - the package does not appear in node_modules.
The issue was that the name value in package.json of installed package was different than the name of imported package (key in package.json of my project).
So if your installed project name is some-package (name value in its package.json) then
in package.json of your project write: "some-package": "owner/some-repo#tag".
If you're doing this with more than one module and want to have more control over versions, you should look into having your own private npm registry.
This way you can npm publish your modules to your private npm registry and use package.json entries the same way you would for public modules.
https://docs.npmjs.com/files/package.json#dependencies

Resources