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
Related
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 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.
I have a node_js project that includes some of our own node_js packages. They are in an npm private repo and show up in node_modules as:
#company/package_name
We are trying to set breakpoints in this code and find they are never hit.
We thought there might be a default skipFile that excludes node_modules and added to our launch.json:
"skipFiles": ["!${workspaceRoot}/node_modules/**/*.js"]
to no effect.
Any tips on how to enable debugging in the node_modules directory?
I know it's an old question but if someone still manages to stumble upon this, you can use VS code to debug node_module files by first symlinking the node_module package with the main project and then telling VS code to use the symlink.
Symlink node_module package
If you are going to be working in a node_module package, it's a good idea to symlink it so that the changes that you make from within your projects are simultaneously applied to the module's code as well and hence, when you are done editing the package, you can directly see the diff and commit it and instead of copy-pasting it from inside node_module and applying it manually.
To symlink a package inside node_module with your project, first clone the repo on your system.
Run npm link inside the directory.
Then go to your main project and then run npm link package_name to link it.
For example, if you wanted to link a package sample-node-module with a project sample-project, which uses sample-node-module as its dependency, you can do it in the following manner:
cd sample-node-module
npm link
cd sample-project
npm link sample-node-module
Be careful that you enter the folder name (and not the package name itself) of the cloned repo in the second link command. You don't have to provide the full path. You can read more about it here
Telling VS Code to use symlinks while debugging
Once you are done with above, you can simply add this small config in your launch.json of VS Code to make it detect breakpoints inside node_modules:
{
"runtimeArgs": [
"--preserve-symlinks"
]
}
Documentation about this can be found here
The problem can be with source maps. Try to add node_modules/example-package files to resolveSourceMapLocations in launch.json, where example-package is directory of module, in which you want to set breakpoint:
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**",
"node_modules/example-package/**/*.js",
]
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.
I'm trying to use karma-commonjs, but I can't seem to get it to lookup packages properly. You can see that on this line, modules are looked up under ./node_modules if there's no config pragma for it in your karma.conf.js.
I can clearly tell that my package is under ./node_modules. Does karma's file server not serve from that directory? How should browser-oriented test code with Karma include an npm module? Any help with this would be tremendous.