Creating npm projects/modules

[piernik]

By default angular-cli creates application (with index.html and all js files). The question is how to, using angular-cli, build npm modules/projects?

I want to create separate modules that I can use in other projects.
Is there some kind of roadmap or tutorial how to build modules to be published on npm?

[piernik]

Anyone can help with it?

[deebloo]

@piernik this issue has come up a couple of times. At the moment you will have to do some of your own tooling to get something ready to be published to npm.

[piernik]

I see. Hope it will be included very soon. Thanks for response.

[clydin]

@piernik, you can check out angular/material2 for an example of a working library.

[thatchej]

Struggling hard with this as well, +1 for requested feature. If angular-cli did this natively my life would be wonderful right now

[thatchej]

@deebloo any recommendation in tooling setup? not sure exactly what to deliver to consuming apps

[deebloo]

So right now for work we have several separate libs we created with the cli. We are only worried about consuming via typescript so I just included an index.ts file at the root of the repo that exports the desired pieces and then install from github. That is working really well for us.

[thatchej]

@deebloo Pardon the questions but I've been working on this for a few days to no avail :)

1.) Do you compile the project before you bring it in as a dependency or do you let the master project take care of that?

2.) Are you bringing it in as an npm dependency or are you cloning the repo locally into the master project?

[deebloo]

@thatchej no worries at all.

1.) right now we just leave everything as typescript and let the master project handle the compiling.
2.) I am using npm to manage the dependencies but and just installing from github.

so steps to manage:
1.) put index.ts file in the root and export stuff
2.) commit project to github and tag
3.) install in other other project.

dependencies: {
    "my-core": "github:username/repositoryname#v1.0.1"
}

This is working well for use for internal libs and such but isn't feasible for public libs and such. Hope this helps!

[thatchej]

Cool, the index.ts file may be the key I am missing. Right now I am pretty much doing the same thing without it, and continue to get some real weird error messages like TypeError: ngModule is null when I try to import.

I'm trying a much more basic strategy with a very simple angular project hand compiled to .js and typing files, but if this falls on it's face I'll definitely try your strategy

[deebloo]

@thatchej let me know how it ends up working for you. I am working on some tooling to help with this that could be used alongside the cli but not ready yet.

[bthharper]

Really interested in the ability to do this too, I'm trying to hand craft this at the moment.

I am trying to avoid using lots of relative paths, and would like something like

import { MyComponent} from "@mypackage/core";

I've tried using paths and baseUrl in tsconfig, but this causes other problems.

@deebloo is there any chance you could give me some pointers on how you import your modules/components into the hosting project?

[deebloo]

@bthharper if you install them with npm you can just import them as you would any other node module

[bthharper]

@deebloo Just realised how stupid I was being ... works a treat!

[thatchej]

@deebloo I've now tried both strategies and continue to get the same issue. It seems to specifically be that the two different versions of Angular 2 are clashing (the master projects version, and the library component version). How are you avoiding this?

[deebloo]

@thatchej peer dependencies

[thatchej]

@deebloo how do I set that up? it's not something I've touched yet

[deebloo]

@thatchej there is just a property in your package.json file called peerDependencies. https://nodejs.org/en/blog/npm/peer-dependencies/

[piernik]

I've managed to publish my project to npm.
Here's what I did.

In angular-cli project my module went to single folder (component-warpper).
In that folder I've added index.ts with list of modules and components to export.
I also added package.json file.
Then in command line go to this folder and npm publish.
Now I can import it as node_modules in other projects.

[BernhardRode]

@piernik you just made my day ;)

[clydin]

If these are internal libraries, it's generally better to install from github (as @deebloo suggested). Especially if the libraries are typescript only.

[filipesilva]

Heya all, this thread has very nice advice to get libs working right now but I really do have to close it as a dupe of #1692. If I don't conversations will start to diverge instead of being focused in a single thread.

Do add your advice there (that issue is marked as FAQ as well), but I want to say that we're looking at really making libs a first class citizen with the CLI, ready to push compiled libs to npm. Don't have a timeline, but that's the plan.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}