Is it worth putting multiple components/modules in a static page?

In a project I'm currently working on there are some Angular 2 SPA and some other static HTML (twig generated) pages. I need to put inside of each static HTML page some little Ng2 components:

• I-Like-it click handler component.
• Search widget component
• Login/Register component

and so on...

The idea is to place component selectors in different zones of the page and get them rendered by Angular 2 on the client side at runtime.

By reading several posts (this in particular) I figured out how to make it work:

1. Bootstrap multiple components in one root module.

   @NgModule({
     imports: [ BrowserModule ],
     declarations: [ 
       App, 
       Widget1Component, 
       Widget2Component, 
       Widget3Component
     ],
     bootstrap: [ 
       Widget1Component, 
       Widget2Component, 
       Widget3Component]
   })
   
   

2. Bootstrap multiple root modules each with one component inside. Since this approach implies to have multiple Ng2 applications on the same page, I think it's the worst solution in terms of performance.

   platformBrowserDynamic().bootstrapModule(AppModule)
   platformBrowserDynamic().bootstrapModule(AppModule2)
   platformBrowserDynamic().bootstrapModule(AppModule3)
   
   

I initially liked the idea to write my front-end code only in Ng2 + Typescript but, since Angular 2 is single App oriented I'm now asking to myself:

1. Is it worth it?
2. Can this problem be solved in other ways (using Angular 2)?
3. What are the alternatives (pure Typescript)?

I'm using twig + PHP for HTML generation + Angular 2.0.0 + Typescript 2.