Render Angular component outside the main app

Question

I have an angular app, it has a bundle and a piece of HTML that contains a root selector

<app></app>

where the app is bootstrapped.

Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like

<component-name></component-name>

The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.

score 13 · Answer 1 · answered Jul 30 '18 at 16:40

13

Just add any components you need to the bootstrap array that is passed to NgModule:

@NgModule({
  declarations: [AppComponent, ContactFormComponent],
  imports: [...],
  providers: [SharedService],
  bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}

and now voila this works:

<html><body>
  <app-contact-form></app-contact-form>
  ============================================
  <app-root></app-root>
</body></html>

Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6

answered Jul 30 '18 at 16:40

ryanrain

4,473
3
21
21

Thanks for an elegant solution for an issue I've been strugling with for a few hours now!! – TheCuBeMan Nov 16 '19 at 07:55
If you have different index pages, for example, in asp mvc applications, where different pages render within one layout page, see https://stackoverflow.com/questions/57916774/why-other-components-not-showing-up-on-index-html-without-app-root/62738016#62738016 – Andrii Jul 05 '20 at 09:20

score 3 · Answer 2 · edited May 23 '17 at 12:09

3

You can bootstrap multiple elements. You can inject a shared service to be able to communicate between components of different Angular2 applications (on the same page).

How to dynamically create bootstrap modals as Angular2 components?

edited May 23 '17 at 12:09

Community

1
1

answered Jul 22 '16 at 12:18

Günter Zöchbauer

623,577
216
2,003
1,567

I don't control the original app. So I don't know if that is my use case..What I do is I load into my app (angular2 app) a bundle and I have the info of he component the user wants to see (his own component, including the component name selector and typedoc genrated info on the component). With that info I want to load his bundle into an iframe and render the component he wants too see. This is dynamic meaning it should render different components depending on what he wants too see.. – Joao Garin Jul 22 '16 at 12:37
Sorry, no idea what that means in detail. You don't **need** to share a service if that is what you mean. – Günter Zöchbauer Jul 22 '16 at 12:38
Hello Gunter, Thanks for your help! Maybe I didnt explain it very clearly. So I am building a webpack tool together with some react fokes (they have built it for react I am prototyping it for angular2) that analyzes components of any given app, and lets you look at different versions of components depending on what Inputs the component has The idea is for example you have a card component that has a name and an image, it will let you look at that card with like Large names, small names, bright images, dark images etc..by switching the inputs. works like a dynamic styleguide for components. – Joao Garin Jul 23 '16 at 14:50
How this works is you take the source code from the component and analyze its source, in this case I am parsing it with typedoc to get some good fingerprint of the component and all its inputs etc..My initial approach was to use dynamic component loader and it has been working but when the component has dependencies on other components it's getting complicated as not all of that info is available to me (as the plugin) sometimes. – Joao Garin Jul 23 '16 at 14:50
The way they are doing and that i am thinking of following the same path is : what if we just put the user's bundle in a iframe and render the component there? this way it mitigates any issues since the bundle is likely to have whatever you need as a plugin and you just put the component in, pass in whatever inputs you want and it will work. It is much simpler than the dynamic component loading but in Angular the apps bootstrap on a specific element, and you cant just print any component there dynamically since the bundle will be looking for that one specific element to boostrap on.. – Joao Garin Jul 23 '16 at 14:51
And that is basically the reason why I asked the question here, as maybe there is some light I am missing that I could leverage on..maybe after this explanation it becomes a bit more clear;P – Joao Garin Jul 23 '16 at 14:51
I guess I can't help you with that. I'm not into TS, I'm using Dart. – Günter Zöchbauer Jul 23 '16 at 17:19

Render Angular component outside the main app

2 Answers2

Linked

Related