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 pages.

These pages are effectively static HTML (though they are rendered by Rails) and then some Angular 2 components are dropped into the page in places. This worked from with Angular 1, we simply bootstrapped the document element with a module that provided the directives and components we needed. There is no routing at all.

With Angular 2 it looks like it is all or nothing. You declare a single root component and everything is rendered through that. This would be a big shift for us and I'd like to avoid changing how we are doing things on these public facing pages.

Is it possible at all to just use Angular 2 components as needed in static HTML pages or will we need to move to a single root element SPA design?

In a nutshell, what I'm asking is if it is possible to have a mix of static content with dynamic angular components sprinkled within, or must all angular components live within a single root element on the page?

Answer 1

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.