What is the best way to structure an Angular2 component library?

Question

I am looking to work on an Angular2 datepicker component as if for release and inclusion in multiple projects. What is the best way to structure the project for this compared to a regular Angular2 project built with angular-cli ? Are there any examples of good starter projects/seeds for such a task? Or should the component library actually be an angular2 application itself?

My initial assumption was that I could just create a standard project with angular-cli which has a single module (eg MyDatepickerModule ) which contains a hierarchy of components forming the datepicker however I don't know if this is the best way as I don't need everything that a full application provides.

Thanks for any guidance!

Answer 1

I would publish the library with AoT compatibility in mind.

This means compiling the source using the ngc compiler. In the distribution package I would publish the JS source, original html/css files, d.ts typings files and the ngc generated metadata.json files.

I recommend publishing the JS source with es2015 modules since this will make your library tree shakable. I would target es5 JS, but with es2015 modules . TypeScript allows for this hybrid mode by setting module to ES2015 and target to es5 in tsconfig.json.

Publishing these files will make your library AoT compatible and Tree shakable.

This is all the consuming application needs in order to AoT compile your library into their complete application.

It's not recommended to publish TypeScript in your package since this would require the consumer to replicate your build environment (typings + TS compiler version).

You can also publish a JiT compatible umd bundle with inlined templates and css. This can be helpful since it might not be practical do AoT during development since compilation is a bit slow. The umd bundle will make it possible to use your library in a JiT based dev environment. For production though you should definitely use the AoT version.

The CLI is not ideal for publishing libraries since CLI is primarily a tool for building complete applications. They might support libraries better in the future though.

Answer 2

Check out https://github.com/angular/material2 . A work in progress, it's a library of controls and themes for Angular2 applying Material Design and is an excellent source for learning to build your own control library.