npm publish for Angular Library

Question

I have an 'ng library' with the lib, tester and e2e projects. When I run 'ng build' it packages all 3 projects under 'dist'. I need to publish only the lib project. I know that 'cd' to 'dist/lib' and 'npm publish' works but I don't have that option as our CI build only does 'npm publish' in project root. So my question is how to achieve publish from the root, for just the lib project?

Answer 1

You have two options, but both will require changes to your CI script:

Option 1:

$ npm publish <path-to-lib-folder>

Option 2:

$ cd <path-to-lib-folder>
$ npm publish

Answer 2

Rejoice my fellow devs! Finally, after 5 days of banging my head on this problem, we have a solution! This is still a 'workaround', as there is no clear way current 'npm' version (as of Feb'2019) supports defining a 'default' publish directory through package.json - that would have been ideal and simpler. So here goes -

Solution

run ng build for the ng library root project. This would generate the dist folder with the library project and tester project in it. Open dist/your-library-project/package.json - this is the package.json that ng-packager generates based on your library's package.json.

Copy the auto-generated attributes from dist/your-library-project/package.json to your root /package.json

 "main": "bundles/your-library-project.umd.js", "module": "fesm5/your-library-project.js", "es2015": "fesm2015/your-library-project.js", "esm5": "esm5/your-library-project.js", "esm2015": "esm2015/your-library-project.js", "fesm5": "fesm5/your-library-project.js", "fesm2015": "fesm2015/your-library-project.js", "typings": "your-library-project.d.ts", "metadata": "your-library-project.metadata.json", "sideEffects": false, "dependencies": { "tslib": "^1.9.0" }

Change all paths to be relative to root package.json . So

"main": "bundles/your-library-project.umd.js",

becomes

"main": "dist/your-library-project/bundles/your-library-project.umd.js",

This essentially tells npm that when it imports your library module into another app, the entry point is at dist/your-library-project/bundles/your-library-project.umd.js - which allows the webapps to import the module by:

import {YourLibraryModule} from 'your-library';

Also, depending on what other attributes are there in your root package.json , it may need further fixes. Eg I had to get rid of all dependencies that were not directly used by library project. Plus turn libraries's dependencies into peerDependencies or devDependencies depending on what it was for. Also, the root Angular project angular.json had to be updated to remove tester project. I created another angular.json in tester project to make it an Angular app in itself, separate from library project - which does not get published.

With all these changes, I am finally able to run npm publish from the root of my project and publish only the dist/your-library-project . This is super important for me, as my CI server's 'Publish' step can only execute npm publish from project root. With these changes, I can publish just the library module even from project root. Sure, this is just a workaround/hack, but I am happy that it can be at least done. Happy Days!