using a Component library with Angular2 w/ webpack

[John Brecht]

I am attempting to write an Angular 2 app that I build with Webpack and would like to import Components that I've developed in a separate library and include via npm. This has proven to be hugely problematic - I've been banging my head against the wall with it for well over a week, with every approach leading to some dead end to which there is apparently no known solution. At least, no known solution to be found after extensive scouring of StackOverflow, so now I turn to this forum...

Rather than detail my various attempts and resultant errors/failures, at this point I just want to know if this is even theoretically possible. Has anyone managed to include a component via npm and then have webpack find it in node_modules and include it successfully in a running app? Are there know working examples in the wild you can point to?

Thanks,

John

PS - at this point I'm completely flexible on which versions of webpack and Angular 2 I use, at this point I feel like I've tried em all. :) 

PPS - I have actually managed to make this work partially - I can include a Component with inline template and styles, but things fall apart when I try to also include associated .less styles and .html templates. As a sort of "standard", I used angular2-seed as my sample app, and a library that I generated with https://github.com/jvandemo/generator-angular2-library , but then embellished with a component that includes template and style files.

[Sander Elias]

Hi John,

Have a look at https://ng-bootstrap.github.io They are doing what you are trying to do. 

Regards

Sander

[John Brecht]

Hi Sander - 

Unfortunately, it looks like they inline everything, no .html or .less files. I can make it work with pure TypeScript, but things start to fall apart when their templates and styles are in files. But thanks for the suggestion! 

-John

[Sander Elias]

Hi John,

What is the reason you can't inline stuff? (this is what the AOT compiler does also!)

Regards

Sander

[John Brecht]

Inlined files are awkward to maintain, you lose tooling support, and it's more difficult to follow their history in version control. But leaving that aside, you lose the use of shared less variables. E.g., I may want to define my color palette within a single colors.less file that can be imported by the less files of any of my components.

[Sander Elias]

Hi John,

I see your point. However, a number of the issues you are referring to are more of an NPM issue as a angular one. Reusing less or html files from within a npm installed library is a issue in itself. If you find a solution, I would glady hear that!

In your case I would considder a git submodule instead of NPM installed library. 

Regards

Sander

[John Brecht]

OK, we'll continue our search. This was standard practice under Angular 1.x using NPM for package management and building with Grunt, so I'm not sure now whether the problem can be said to lie with Angular 2 or Webpack, or perhaps both, but I don't think NPM is the problem.

I'm going to try using this tool next to create a distribution with styles and templates inlined:

https://github.com/TheLarkInn/angular2-template-loader

I will report back if we have success!

[Sander Elias]

Hi John,

Webpack will be indeed a help in this. Sean told me he was going to build the template loader, didn't know he finished it already. 
On another note, exactly this subject is going to be handled by Igor in the coming period. So a better solution is on the horizon. The current situation isn't ideal indeed.

Regards

Sander