CODEWITHSUNDEEP
angular
nakajuice
nakajuice

Reputation: 692

How to bootstrap an app in Angular 2 without replacing contents of the original website?

I am not exactly making a single page app, but i rather make an Angular app that ships components, so that a user can just place a tag on their website and Angular app recognizes the tag and implements the component accordingly.

Let's say I have an Angular app that only implements one component test, and it should be possible to place the component in any place on the page:

<body>
    ...
    <test></test>
    ...
</body>

Or like this:

<body>
    <div>
        ...
        <test></test>
        ...
    </div>
</body>

and so on.

However, if I bootstrap the App module in the body DOM element, the whole content of the body is replaced. So what I need is the way to implement one Angular component in the app without replacing other content of the page.

I guess a proper way to do this would be injecting and manipulating some of templateRef, elementRef or viewContainerRef, but I am not sure which one exactly is it and what should I do with them.

Help appreciated!

Upvotes: 4

Views: 397

Answers (2)

Z. Bagley
Z. Bagley

Reputation: 9260

As posted in the comment you probably don't want to be using Angular2/4 in this specific type of application. React is probably the MVC you're looking for if you want to add small pieces in existing pages. Other than that you'll probably just want to be coding using jquery or similar. Angular2/4 doesn't really work as added pieces to existing, and is made for large-scale web-app development (hence the huge initial app size).

If you really want to use Angular2/4 then you'll want to transfer the previous code into your Angular Framework. Either you'll transfer the old page into your Angular2/4 Framework or have to rewrite your Angular code.

Sorry, since I'm sure this wasn't the answer you were hoping to hear.

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

There is an open issue Transclusion for root component

See also

Upvotes: 2

Related Questions