Sprinkling Angular 2 components inside a non-angular page

Question

Currently looking at upgrade paths from Angular 1 -> Angular 2 and one things we\'ve done with our Angular 1 work is reuse some of our components on public facing non-app pa

Answer 1

we simply bootstrapped the document element with a module that provided the directives and components we needed. There is no routing at all

That's exactly how I'm currently using Angular2. See the example at https://github.com/niczero/ng2-es5-file-upload/blob/master/demo/index.html -- some of my 'static' pages are generated by perl in the same way you are using ruby.

As an aside, being able to use your modules both ways is much easier if you embrace Universal Module Definitions

Answer 2

So this is simpler than I originally thought. In the Angular 2 docs it has some specific wording around bootstrapping multiple apps.

Bootstrapping Multiple Applications

When working within a browser window, there are many singleton resources: cookies, title, location, and others. Angular services that represent these resources must likewise be shared across all Angular applications that occupy the same browser window. For this reason, Angular creates exactly one global platform object which stores all shared services, and each angular application injector has the platform injector as its parent.

Each application has its own private injector as well. When there are multiple applications on a page, Angular treats each application injector's services as private to that application.

So it seems clear that this is intended to be possible and that multiple apps share service resources which is what I would hope for.

I've done some trivial tests with multiple bootstrapped components and it works fine. One thing I have not yet tried is bootstrapping an Angular 2 attribute directive for use outside of Angular 2 components. I suspect that won't work and that bootstrap only works with Components and not Directives.

In terms of guidance, I would suggest that Angular 2 is not really designed for sprinkling behaviour throughout a static page and probably should not be used that way. Rather, while you may have multiple sections of your paged defined by multiple apps, that components should make up nearly all of the document/interface.