I wish to manually install npm modules for my Angular project. I am behind a proxy and instead of setting the proxy information for my npm config file, I just wish to manually download npm modules and add them to my npm-cache/node_modules folders.
I have seen this old post but haven't found anything more recent: How to install a node.js module without using npm?
One of the modules I want to install is ng2-signalr. I went to GitHub, downloaded the source for the package, and added it to my node_modules folder.
After doing this I can import the module without error:
import { SignalRConfiguration } from 'ng2-signalr';
When I add code that uses the class:
const c = new SignalRConfiguration();
I get the following error:
index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
Am I missing a step for manually installing a node module? Should I download to my npm cache folder?
I'm aware that I have to pay mind to dependencies of these manually installed modules. Also I know that the cache folder gets overwritten when you need to reinstall and that the node_modules folder is not usually included when you check in your source due to the size, but I only wish to experiment with the library.
Any advice?
Add the directory or index file you wish to use in your Typescript config. Example in tsconfig.app.json:
"include": [
"../path/to/library"
]
Rebuild after this. This is likely due to the 3rd party not setting up the package.json correctly.
Related
I was recently using a react pakage and importing like so:
import ReactRegionSelect from 'react-region-select';
Now how does react know in my case where to import react-region-select from ?
I.E. if i were building the plugin react-region-select, which can be found HERE.
do i need to build it in a way that webpack or guld or node knows where to pick it from , considering it will be in node_modules ?
or is it just because in my package.json file i have the property name: 'react-region-select', that webpack, gulp or node knows where to pick it from ?
It checks node_modules folder by default.
You would need to publish to npm to use it in another project remotely.
Yes, using the name. NPM uses the published name to download the module under the same name when resolving dependancies.
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolvemodules
This feels like an embarrassing question to ask but having recently published a Node package to the NPM registry, I now find it doesn't work.
The issue seems to be that my main file, ./src/index.js, isn't being included in the global install.
I know this because when I call the package from the command line it
runs ./bin/cli.js in the package as expected, but then throws:
Error: Cannot find module '../src/index.js'
Require stack:
- /usr/lib/node_modules/diffcraft/bin/cli.js
The error even references the line in ./bin/cli.js where the index
file is required, so that's definitely where the problem is.
I also know this because I checked the folder where the module is
installed globally and while the bin folder is there, the src
folder isn't. So the main code for my package just isn't there.
After discovering this, I even patched package.json to ensure that ./src/index.js was explicitly whitelisted in the files array. I hadn't done this before as NPM guidance states that whichever file is listed under main is also automatically whitelisted. But even including the file in files explicitly hasn't worked.
For reference, I don't have an .npmignore file.
I've got a horrible feeling I'm missing something simple and basic... Any ideas why my main file might be being skipped?
The package is diffcraft.
It works if you omit the ./ in front of the files (tested with npm 6.14.4 on Windows):
"files": [
"bin/cli.js",
"src/index.js"
],
This might be a bug in npm.
You can check this without publishing by running npm pack and checking the archive file.
Alternative is using an .npmignore file.
I'm trying to use gtfs-realtime-bindings' node module.
The published module on npm is outdated so I'm downloading directly from github. However, gtfs-realtime-bindings is a super repo has subfolders for a lot of different environments.
How can I specify a subfolder in my require?
After downloading and extracting the zip file, you can npm install the relative path to your dependencies by running it in the root of your project like this:
npm i ../gtfs-realtime-bindings/nodejs --save
This is assuming that you've extracted the git repository zip adjacent to the project root directory. In your code you can then require('gtfs-realtime-bindings') like you would any other dependency installed via npm.
Are you downloading the repo and inserted on your source code? You should be able to use import or require from anywhere, example.
code
__src
____index.js
__gtfs-realtime-bindings
____nodejs
____java
You should be able to get the nodejs files from the index.js using
import nodejs from "../gtfs-realtime-bindings/nodejs";
or
const nodejs = require("../gtfs-realtime-bindings/nodejs");
Obviously, this depends on what you are trying to get, I don't know that repo, but this should work
I've a directive that I want to publish on npm. I read the doc here and after that here is what I did:
Copy the .js file that is compiled from the .ts file. ( I didn't copy the map file)
Make new folder on desktop and paste it there
npm init and npm publish
create new project and npm install --save-dev my published package
However it doesn't find the name of the directive when I'm trying to declare it in the module
#NgModule({
declarations: [
AppComponent,
MyDirective //this is not found
],
The js file appears in the module folder though
You imported import {...} from 'your-package-name/your-main-js'; it, right?
Here's a nice guide to create npm packages for Angular2.
https://medium.com/#OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435#.coog6uf98
If you want to create a component package, remember to inline your templates/styles ! Otherwise your app will be broken..
Or you could use a script like this https://github.com/ludohenin/gulp-inline-ng2-template to inline those templates/styles..
Maybe this repo as a starting point will help: https://github.com/mxii/ng2-offclick
You can also take a look at these resources:
http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/
http://myrighttocode.org/blog/typescript/angular2/components/npm/angular2-npm-components
https://github.com/jvandemo/generator-angular2-library
https://www.reddit.com/r/Angular2/comments/52vz2b/how_to_publish_component_as_library/
Just in case someone in the future might be struggling as I did here are the big steps.
npm init the folder so it has a package.json and add necessary devDependencies
compile .ts to js
tell npm to ignore .ts files in .npmignore:
node_modules
npm-debug.log
*.ts
!*.d.ts
I hope I didn't miss anything, in any case the tutorials above in the accepted answer will help
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.