Using angular-cli to generate a component library for angular 2

[madoar]

I'm currently writing an web application for which I need to use a wizard component.
Because I couldn't find one that satisfies my requirements on the web I started to write my own wizard module based on some projects I found written for angular 1.
Now I want to move the files belonging to the wizard component in a new angular 2 project, to decouple it from my main project.
I already searched for a guide containing the information how to create a component library when I found this website describing how to create an angular 2 component library.

However because I'm not too knowledgeable about the angular 2 and javascript tool chains, and because the given guide doesn't use angular-cli, I'm asking here if someone can tell me how to create a component library for my wizard component and its module for angular 2 with angular-cli.

[daniele-zurico]

have a look on that: http://www.dzurico.com/how-to-create-an-angular-library/

[sebastian-heinz]

I asked a similar question here: #3277
There are also some answers that could help you maybe.

[madoar]

Thanks for the links.
After reading http://www.dzurico.com/how-to-create-an-angular-library/ I must say it seems like some configuration changes in the project need to be done so that it all works.
In addition is seems that the ng build command isn't used to build the library but npm run build is used instead. Does this mean that if I use the instructions from the link I can't use ng build to build my library?
If ng build can't be used, can ng github-pages:deploy be used to push the sources and the build to a github repository?
Another thing that worries me is the way stylesheets are processed. If I understand the used gulpfile correctly they are just copied to the destination build folder. This means that they aren't preprocessed during the build process, when less or some other format is used to describe the stylesheets, or do I have a wrong understanding of the code?

It would be quite nice the creation of component libraries would be directly supported in angular-cli. Is such a feature planned?

[daniele-zurico]

Hi I don't know if angular-cli will support that, and this is why I created it! The scss file are not just copied, if you open your component in the dist folder you'll see that it is inlined there, it means that has been converted in css inline and then is copied.
About the command you can rename how you want in the package.json but ng run is something specific of angular-cli and that is not the case

[madoar]

Hi, thanks for you explanation!
I think we are talking about different things.
I understand, that the file inline-resources.js does a preprocessing where it mainly removes the linebreaks from the scss string from the files. Afterwards these "preprocessed" strings are inlined inside the component styles properties.
What I'm missing here is the preprocessing step that processes the scss string to a "normal" css string.
I'm asking, because I'm kind of new to angular 2 and its tool pipeline. In addition I want to use stylesheets in the less format and I don't know if angular can handle and preprocess two different css extension formats (Scss and less) at the same time.

About the usage of ng build:
Because I'm currently using ng serve to test my application I would like to use ng build in the future to build the application and other libraries I write for production use. Again because I don't know alot about the workings behind ng build and npm run build I'm asking if I can't use ng build to build a component library like it is described by your guide.

[daniele-zurico]

As I said I didn't test with sass. It should works. Ng serve is just for angular-cli (a tool) what I did is not using cli because is not useful in this case

[filipesilva]

Dupe of #1692.

There's good discussion here don't get me wrong, but it's better to consolidate issues.

[nikolasleblanc]

https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

[petersalomonsen]

We're in the process of making a simple command tool for generating libraries. You just pass the ts-file you want to be the entry point of the library:

ngmakelib src/library.entry.ts library-name

and this creates a tar.gz that you may use directly with npm install.

Currently only exporting FESM module which works for all our usages for reuse in other Angular projects.

You can take a look here:
https://github.com/fintechneo/ngmakelib/

[beradrian]

@nikolasleblanc the article you pasted is good and ng-packagr is a good option, but it will be better to have this integrated in angular-cli.

[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.}