23

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?

Chris Nicola
  • 14,384
  • 6
  • 47
  • 61

2 Answers2

9

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.

jessepinho
  • 5,580
  • 1
  • 19
  • 19
Chris Nicola
  • 14,384
  • 6
  • 47
  • 61
  • 2
    I found [this article](http://kbyte.snowpenguin.org/portal/en/2015/10/29/angular2-single-service-multiple-apps/) helpful for injecting a single instance of your own custom service into multiple Angular apps on a page. – jessepinho Apr 11 '16 at 08:18
  • Based on how you did this and your experience with that sole global platform object, would you agree it is not possible to host multiple different Angular versions (2.0 vs 2.1, for example) in the same web page? – David Pfeffer Dec 06 '16 at 16:46
  • This is helpful, but the linked docs are now 404 and the "bootstrapping" section in the current docs doesn't mention this. Can anyone confirm if it still applies to angular 5? – Adam Apr 19 '18 at 09:48
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

niczero
  • 367
  • 1
  • 7
  • That doesn't really look quite like what we are doing. For example, we have a completely static landing page, and it uses several components throughout it. There is no single "root" component. I suppose I can just bootstrap multiple components for this perhaps? – Chris Nicola Feb 16 '16 at 00:20