I have an Angular2 project. In it I have a DisplayModule which contains components/directives/pipes/services used to do display stuff.
What do I have to do to make this a npm module which I can them load in other projects.
So far I have:
Extracted the folder as in a separate git folder, which contains the display.module.ts file in which I import and export all the relevant things from within this folder.
Tried to find what to do with this folder so that I can import it. From my understanding the steps are as follows:
a) do something to compile it into js files
b) export those js files as a package
c) publish those js files as a private npm package
d) include this package with npm install in another project
As you have probably guessed I have no idea how to do all the points under 2.
Please help
Related
I published a small package to npm which consists of several files.
The index.js of the package just imports and re exports the public classes and APIs/
When I install the package from NPM I get the following error when I try to use the custom package:
Error: Cannot find module './openapi'
Require stack:
- .../node_modules/.../dist/index.js
I checked dist folder in the module dir in node_modules and the files are there.
I assume there is an issue with the relative path inside the node_modules
One option to fix this is to bundle everything into a single file, but I would prefer to keep multiple files.
What options are there to fix this ?
.gitignore files are ignored. There were after all some ignored local files that needed a to be pushed.
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 am using angular-cli for my angular application, but because angular-cli currently does not support use for creating a library, I used the seemingly most widely used git project to create my library: https://github.com/jvandemo/generator-angular2-library
My issue is that I don't want to publish my npm module library to the public directory. Instead I want to use the git url directly in my dependencies. During development, this works fine. I can run the build locally and run an npm link inside the "dist" folder and everything is dandy. However when I push my npm module code to git, and then run an npm install in the consuming project, I'm not sure how to set it so that my consuming project just looks inside the dist folder of the module and treats it as if it was the root of the module.
For example, in node_modules/my_private_module, my file structure looks like:
dist/
-- component1
-- compoennt2
-- my_module.metadata.json
-- my_module.d.ts
-- my_module.umd.js
-- index.d.ts
-- index.js
-- package.json
-- README.MD
package.json
README.md
All the files that my application is using are in the /dist folder, but I DO NOT want to specify "dist" in all my imports like
import { myComponent1 } from 'my_private_module/dist';
I want to be able to just specify
import { myComponent } from 'my_private_module";
As I do in development when I run an npm link in the dist folder.
Is there a way I can achieve this?
Thanks
In package.json for your module, in the root folder:
typings: 'dist/index.d.ts',
main: 'dist/index.js'
Remove the package.json in your dist folder.
When the package is resolved from import {...} from 'my_private_module', the module loader will look for a folder called my_private_module under node_modules, and look either for index.js which defines the exports, or within package.json for the main property - which in your case also points to index.js from the dist folder.
It is good practice to put package.json where you want your module to be found, and have main and typings point to index.js and index.d.ts.
I answered a similar question here and it seems relevant.
Basically, treat the generated library in the dist folder as it's own repo. In order to keep the git init files and folders, you tell ng-packagr to not destroy the destination when building. Then you push the changes to the library specific repo and use that as your package url in other projects.
Overview
I'm trying to install the bootstrap-wysiwyg package in my ES6 project using JSPM.
Usually you can just install a package using the command
jspm install npm:bootstrap-wysiwyg
And JSPM will take care of the config.js file and create the entry JS file in the jspm_packages folder.
My problem
For this particular package, it does create the config.js entry to the bootstrap-wysiwyg JS file in the root directory, but it does not create that JS file itself.
Files
Config.js
"bootstrap-wysiwyg": "npm:bootstrap-wysiwyg#1.0.4",
Import
import stuff from 'bootstrap-wysiwyg';
Error message
GET http://localhost:9000/jspm_packages/npm/bootstrap-wysiwyg#1.0.4.js 404 (Not Found)
Question
How can I make sure JSPM creates that file? I could make one myself, but then version control is obviously broken.
The module your are trying to import is missing "main" entry in its package.json: https://github.com/steveathon/bootstrap-wysiwyg/blob/master/package.json Therefore, JSPM cannot create the main import. You have to either import files directly from the module (i.e. import stuff from 'bootstrap-wysiwyg/js/smth') or create an override for this package which will define "main" for the package (https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration).
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